admin管理员组文章数量:1660119
最近在使用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" //七牛上传地址,这个基本上都适用
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/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/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/delete/"七牛固定的文件删除地址
String url = "http://rs.qiniu/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();
}
}
如果有什么写的不对的地方或者有问题的地方,还请各位大牛多多指点,谢谢!不喜勿喷。。。
页面效果
上传和删除文件和这个同理,只要限定一下文件类型就可以了
版权声明:本文标题:Vue使用Element-ui 将文件、图片上传七牛云,实现对已上传成功的文件进行删除操作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729845230a1215049.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论