超简单的上传图片至七牛云
<el-row>
<el-form-item label="图片" prop="img" label-width="120px">
<el-col :span="20">
<el-upload :action="upload_qiniu_url" :before-upload="beforeUpload" :data="qiniuData" :on-error="uploadError" :on-success="uploadSuccess" :show-file-list="false" class="avatar-uploader">
<img :src="imageUrl" alt class="avatar" v-if="!isEmpty(imageUrl)" />
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
</el-upload>
</el-col>
</el-form-item>
</el-row>
imageUrl: '',
//七牛云上传
qiniuData: {
key: "",
token: ""
},
// 七牛云上传储存区域的上传域名(华东、华北、华南、北美、东南亚)
upload_qiniu_url: "",
upload_qiniu_addr: "",
Global: {
dataUrl: ""
},
//获取七牛云的token
getQiniuToken: function () {
getQiNiuData().then(res => {
this.qiniuData.token = res.data.object
});
},
uploadSuccess(res) {
this.visibleDialog.loading = false;
let img = this.upload_qiniu_addr + res.key;
this.$set(this, 'imageUrl', img)
},
uploadError(res) {
console.log(res);
this.visibleDialog.loading = false;
this.$message.error('上传文件错误,不存在!');
},
beforeUpload(file) {
this.visibleDialog.loading = true;
this.qiniuData.key = file.name;
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 1MB!');
this.visibleDialog.loading = false;
}
return isLt2M;
},
//提交
submitForm(formName) {
this.$refs.formData.validate((valid) => {
if (valid) {
this.form.img = this.imageUrl;
this.visibleDialog.loading = true;
saveAdvertising(this.$qs.stringify(this.form)).then((response) => {
console.log(response);
this.$message.success(response.data.statusDescription);
this.visibleDialog.loading = false;
this.visibleDialog.addGoodsDialog = false;
this.getAdvertisingList();
}).catch((error) => {
console.log(error);
this.visibleDialog.loading = false;
})
} else {
return
}
});
},