七牛云上传图片-Vue+ElementUI使用qiniu-js
<script>
export default {
name: 'sendMessages',
components: {},
props:{
conData: {},
QiniuData: {}
},
data () {
return {
commentuid: '',
loading: false,
domain: "", // 七牛云的上传地址（华南区）
qiniuaddr: "http://qnidimage.mmantou.cn", // 七牛云的图片外链地址
uploadPicUrl: "", //提交到后台图片地址
fileList: [],
fileList2: [],
qiniuUploader: null, // 七牛上传对象
disabled: false,
delates: false,
QiniuDatas: {
key: ""
}
}
},
mounted (){
this.qiniuUploader = require('qiniu-js');
this.initData();
},
methods:{
initData(){},
selectFileEvent(e) {
this.$refs.selectFile.click();
},
handleRemove() {
this.fileList = []
this.fileList2 = []
},
changeSuccess(file){
this.fileList=[]
this.fileList2=[]
if(this.QiniuData.token!=''){
this.loading = true
var fileType = new Array("image/png", "image/jpeg", "image/jpg","image/gif");
var file=file.target.files[0]
console.log(file)
if(!(fileType.indexOf(file.type) > -1)){
this.$message.error(this.$t('uploadPicFormats'));
return false;
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
this.$message.error(this.$t('editProfileDesc'));
this.loading = false
return false;
}
var putExtra = {
fname: "",
params: {},
mimeType: ["image/png", "image/jpeg", "image/jpg","image/gif"]
};
var config = {
useCdnDomain: true,
UseHTTPS:true,
region: null
};
var that= this;
var observer = {
next(res){},
error(err){console.log(err)},
complete(res){
that.loading=false
that.QiniuDatas.key = res.key
that.uploadPicUrl = `${that.qiniuaddr}/${that.QiniuDatas.key}`
that.upscuss()
}
};
this.loading = true
var observable = this.qiniuUploader.upload(file,null,this.QiniuData.token,putExtra,config)
var subscription = observable.subscribe(observer) // 上传开始
}else{
console.log('---')
}
},
upscuss(){
this.fileList.push(this.QiniuDatas.key)
this.fileList2.push(this.uploadPicUrl)
},
},
}
</script>
</style>