最近在使用vue将文件和图片上传到七牛云上，并对已上传成功的文件在列表进行删除操作，以此来记录一下在这期间的具体步骤以及踩过的坑。。。。。
我对前端不太熟，而我的上传功能需要设置在第二层页面上，但在对第二层页面操作的时候，js页面死活引入不进去，所以在获取七牛云上传token和文件删除时，都从后台调用方法
七牛云文件上传具体处理步骤：
1、在文件上传之前获取token，即七牛云上传权限
2、设置key值，即在七牛云上该上传文件的保存路径
3、将文件路径存，根据你自己的存储规则，存到你的数库中
前端页面,其他属性的使用请参考element官网：
http://element-cn.eleme.io/#/zh-CN/component/upload
<el-form-item prop="imageUrl" label="上传图片">
<el-upload
ref="uploadImage" //给你的upland上传起一个名字
action="http://upload.qiniu.com" //七牛上传地址，这个基本上都适用
bucket="domain"//你自己的域名
:limit="basicPackDefault.maxLength" //最大上传数量
:accept="basicPackDefault.acceptImage" //自己设置允许上传是文件类型
:multiple="basicPackDefault.multiple" //设置是否允许多选上传
:before-upload="beforeUpload" //上传前调用的方法，主要用来获取token和key
:on-success="success" //上传成功后调用的方法
:on-remove="handleRemoveImage"//文件列表文件删除时走的方法
:on-error="uploadError"//上传失败时走的方法
:auto-upload="false"//false是不允许自动上传，需手动触发
:data="dataObj">//文件上传时携带的参数，至少携带token和key
<el-button slot="trigger" size="small" type="primary" v-model="form.imageUrl">选取图片</el-button>
<el-button size="small" type="primary" v-model="dataObj.name" @click="submitUploadImage">上传到服务器
</el-button>
js页面
（当多条数据都涉及到上传更新时，可能会出现列表缓存数据在多条记录间重复出现的问题，这里我们可以在整个表单提交时，做一次清空列表的处理）
七牛官网：
https://developer.qiniu.com/kodo/manual/1206/put-policy
//将文件列表清空
scientificR.$refs.uploadImage.clearFiles();var up=new Vue ({
.......此处省略
basicPackDefault: {
maxLength: 1, //最大图片数量
multiple: true, //可否上传多张
acceptImage: "image/gif,image/jpeg,image/jpg,image/png",
},
dataObj: {token: '', key: '',name:''},
methods: {
//上传事件
submitUploadImage: function () {
this.$refs.uploadImage.submit();
},
//TODO 上传之前 获取TOKEN
beforeUpload: function (file) {
up.basicPackDefault.multiple="true";
var sourceLink;
$.ajax({
url: '/upload/uptoken',
type: 'POST',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
sourceLink=returndata.uptoken; // 获取上传成功后的文件的Url
up.$data.dataObj.token = sourceLink;
},
error: function (returndata) {
alert("returndata.error"+returndata);
}
})
// do something with key here,根据自己业务需要自行设置
up.$data.dataObj.name =file.name;
up.$data.dataObj.key =" up/"+file.name;
if (file.type=="image/jpeg"||file.type=="image/png"||file.type=="image/gif"||file.type=="image/bmp"){
//将数据存入数据库
up.form.imageUrl ="<img src=\"http://"+ up.domain +'/' + up.$data.dataObj.key + '\" style=\"max-width:100%;\">';
},
//上传成功后
success: function (res, file,files) {
if (res.key != '') {
this.$alert('上传成功', '上传结果', {
type: 'success',
confirmButtonText: '确定',
});
}
else {
this.$alert(response.message, '333上传结果', {
type: 'error',
confirmButtonText: '确定',
});
}
},
//上传失败后
uploadError: function (response, file, fileList) {
up.$message.error("上传失败，请检查文件名是否重复，重新上传！！！")
},
//删除上传列表中的文件
handleRemoveImage: function (file,fileList) {
var keyNow=file.name;
/*删除上传文件*/
$.ajax({
url: '/upload/deleteFile',
type: 'POST',
dataType: 'json',
data: {
key: keyNow
},
success: function (returndata) {
alert("删除成功！！");
up.$data.form.imageUrl="";
},
error: function (returndata) {
alert("returndata.error"+"删除失败");
}
})
},
}
})后台方法：
后台我们用的是gradle，引入依赖
compile(
'com.qiniu:qiniu-java-sdk:7.2.1'
)后台代码
1、我用的是7.2.1的版本，该SDK提供了后台生成token的方法，在这里我自己封装了一下
2、删除方法也是由sdk提供的，具体的网页返回值的状态码可以参考以下链接：
https://developer.qiniu.com/fusion/kb/1352/the-http-request-return-a-status-code
//获取文件上传的token
public void uptoken() {
renderJson(String.format("{\"uptoken\":\"%s\"}", StoreKit.driver().getUploadToken(null)));
}
/**删除文件*/
public void deleteFile() throws QiniuException {
//获取Auth对象
Auth auth = Auth.create(你们自己空间密匙);
//空间名
String bucketName = "这里填写你们自己的七牛云文件存储空间名";
//当时存储文件时自己拼接在domain之后的存储路径
String key ="自己命名/"+getPara("key");
//指定需要删除的空间和文件，格式为： <bucket>:<key>
String entry = bucketName+":"+key;
//通过安全base64编码方式进行编码处理
String encodedEntryURI = UrlSafeBase64.encodeToString(entry);
//指定接口
String target ="/delete/"+encodedEntryURI + "\n";
//获取token，即操作凭证
String access_token = auth.sign(target);
//指定好请求的delete接口地址,"http://rs.qiniu.com/delete/"七牛固定的文件删除地址
String url = "http://rs.qiniu.com/delete/" + encodedEntryURI;
// System.out.println(access_token);
//通过Okhttp jar 包封装的对象 发起网络请求
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder().url(url)
.addHeader("Content-Type", "application/x-www-form-urlencoded")
.addHeader("Authorization", "QBox " + access_token).build();
Response re = null;
try {
re = client.newCall(request).execute();
if (re.isSuccessful() == true) {
System.out.println(re.code());
success();
} else {
renderJson("fail");
System.out.println(re.code());
}
} catch (IOException e) {
e.printStackTrace();
}
}如果有什么写的不对的地方或者有问题的地方，还请各位大牛多多指点，谢谢！不喜勿喷。。。
页面效果
上传和删除文件和这个同理，只要限定一下文件类型就可以了