使用vue+若依实现上传图片,上传图片之后不会立即渲染

//记得点赞收藏以免以后找不到了
<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.字段之后

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值