以往我们所知道的都是前端上传到后端,后端回传地址。后端是指自己服务器,而不是花钱~嫩来的第三方。第三方除了贵没什么别的坏处。
为什么用七牛
- 什么是七牛云,自行百度。我只讲几点重要的
- 图片压缩、裁剪,人脸识别,CDN加速,不占后端资源
代码
为什么和csdn大部分不同?他们是直接一个ajaxj就请求了,没有配置可言
这是官方前端上传七牛详细文档
-
首先是声明了好几个变量,都是配置来的。最后qinniu.upload()上传
-
key是上传后的文件名,为什么有个/,是命名规范吧,也是为了防止命名重复
-
filetail是获取的文件格式(后缀)
-
为什么没有请求地址? 因为我们是根据自己的后端返回的token判断的。有一个配置是否自动分析上传区域,因为存储区域就五个。
-
其次是回显地址,他会返回给你key,就是你命名的文件名,有key==成功。
回显地址=“你在七牛上设置好的外链地址”+key
比如你在七牛上设置了返回https://baidu.com/。那么就是https://baidu.com/文件名 -
为什么有个
_this=this
,因为发现this用不了,原理不大懂,踩坑了 -
import * as qiniu from "qiniu-js";
记得npm下这个,开始用七牛的人了这个应该会
async uploadFile(file) {
let filetail = file.file.type.split('/')[1]
let _this = this;
let newfile = file.file;
let observer = {
next(res) {
},
error(err) {
console.log(err.message);
_this.$message.error('图片上传失败')
},
complete(result) {
if (result.key) {
let url="https://xxxx.com/" + result.key
_this.imglist.push({
"url":url})
if(_this.imglist.length==_this.fileList.length)
_this.imgsubmit()
}
}
},
key = `remarkimg/${
new Date().getTime()}.${
filetail}`,
config = {
useCdnDomain: true, //使用cdn
region: null //上传区域,当为 null 或 undefined 时,自动分析上传域名区域。
},
putExtra = {
fname: "", //文件原始名称
params: {
},
mimeType: null //指定所传的文件类型
},
observable = qiniu.upload(newfile, key, this.token, putExtra, config);
let subscription =observable.subscribe(observer);
},