图片上传 el-upload 单个图片写法

   上传单个图片:

template:
<el-form-item label="上传图片" prop="result">
            <el-upload
              v-if="!formList.result"
              class="upload-demo"
              action='/api/jsonws/dlapp/add-file-entry'
              :multiple="false"
              :auto-upload="true"
              :before-upload="beforeuplpad"
              :http-request="uploadFileSuccess"
              :on-error="handleUploadError"
              accept=".jpg,.jpeg,.png"
            >
              <div class="up-box">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <span>点击上传图片</span>
              </div>
            </el-upload>
            <div class="up-box" v-if="formList.result">
              <i
                @click.stop="formList.result = ''"
                class="el-icon-close avatar-uploader-icon"
              ></i>
              //  formList.result 是字符串
              <el-image
                :preview-src-list="[url + formList.result]"        
                class="up-img"
                v-if="formList.result"
                :src="url + formList.result"
                alt=""
              ></el-image>
            </div>
          </el-form-item>
methods:{
    
  /*
       * 上传之前的回调
       * */
      beforeuplpad(event) {
        this.imgType = event.type;
        let imgSize = Number(event.size / 1024 / 1024);
        if (imgSize > 100) {
          this.$message({
            message: "文件大小不能超过100M,请重新上传。",
            type: "warning",
          });
          return false;
        }
      },
      uploadCert({ data, file }) {
        uploadFile(file,{fileId:'',itemType:'cert'}).then(res=>{
          this.formList.cert = res.data.savePath
        })
      },
      /*
       * 文件上传
       * */
      uploadFileSuccess({ data, file }) {
        uploadFile(file,{fileId:'',itemType:'result'}).then(res=>{
          this.formList.result = res.data.savePath
        })
      },
      /*
       * 上传失败回调
       * */
      handleUploadError(err) {
        this.$message.error(`上传失败[${err}], 请重试`);
        // Loading.service({
        //  text: "正在上传文件,请稍后...",
        // }).close()
      },
 
}
 
posted @   以后。h  阅读(80)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示