//记得点赞收藏以免以后找不到了
<el-form-item label="上传图片" prop="annualInspectionCertificateUrl">
<el-upload
class="sizeJudge"
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess3"
:on-error="handleUploadError"
list-type="picture-card"
name="file"
:headers="headers"
:imit="1"
:show-file-list="false">
<i v-if="!form.annualInspectionCertificateUrl" class="el-icon-plus"></i>
<img v-else style="width: 100%;height: 100%;":src="urls+'/file/preview?fileName=' + form.annualInspectionCertificateUrl +'&token='+headers.Authorization" alt="">
</el-upload>
</el-form-item>
解释:
1.uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
2. // 上传前校检格式和大小
handleBeforeUpload(file) {
if (file.type.indexOf("image/") === -1) {
this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
return false
} else {
return true
}
}
3. handleUploadSuccess3(res, file) {//上传成功返回url
// 如果上传成功
if (res.code === 200) {
console.log(res.data)
this.form.annualInspectionCertificateUrl = res.data;
} else {
this.$message.error("图片插入失败");
}
}
4.handleUploadError() {//上传失败
this.$message.error("图片插入失败");
},
5. headers: {
Authorization: "Bearer " + getToken()//getToken()是我自己存放的token
},
6.img中的src=“这里面的3返回的url加上拼接后端服务器的url,/file/preview?fileName=是我的地址,你们的地址找你们后端要”
7.记得让你们后端开minio不然上传图片运行不了
如果上传图片调用成功200,但是页面没有及时刷新的话可以加一个
this.$forceUpdate()
强制刷新dom,加在3的200之后吧,url给到form.字段之后