vue element 图片上传的实现

参考

  1.element ui 图片上传与图片删除(手动上传)

  2.element ui实现简单上传图片、删除图片、预览图片

  3.Vue+Element UI Upload 组件 上传单张图片去除后面的+号

  4.Element UI Upload 组件 设置只允许上传单张图片的操作

 
 

 

实现效果:

 

 

 

代码

前端

复制代码
        <el-form-item label="背景图片" prop="scenseBgimgUrl" >
          <el-upload accept="image/jpeg,image/gif,image/png" :action="upload.url" list-type="picture-card" :auto-upload="true" :limit = "1"
          :on-preview="handlePictureCardPreview" :file-list="this.imageList" :on-success="handlePictureSuccess" :on-remove="handleRemove"
          :headers="upload.headers" >
            <i class="el-icon-plus"></i>

          </el-upload>

        </el-form-item>


data()
     upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/scense/manage/image/upload",// 上传的图片服务器地址
      },
      ctImageInfoDOList: [],
      imageList: [],

method()

 //上传成功
    handlePictureSuccess(res, file) {
      if (res.code === 200) {
        this.uuid()
        const logo = this.uuidA
        file.logo = logo
        this.form.ctImageInfoDOList.push({
          billType: res.data[0].billType,
          filePath: res.data[0].filePath,
          logo: logo
        });
        file.status = "success"
        this.$message.success("图片上传成功");
      } else {
        file.status = "error"
        this.$message.error("图片上传失败:" + res.msg);
      }
    },
    uuid() {
      const s = []
      const hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4'
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
      s[8] = s[13] = s[18] = s[23] = '-'

      this.uuidA = s.join('')
      console.log(s.join(''), 's.join("")')
      return this.uuidA
    },
    //删除操作
    handleRemove(file) {
      //alert(this.uploadUrl);
      //console.log(file, fileList);
      const c2 = this.form.ctImageInfoDOList.findIndex((ace) => ace.logo === file.logo)
      this.form.ctImageInfoDOList.splice(c2, 1)
    },
    //图片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
复制代码

 

 后端:

复制代码
    /**
     * 图片上传
     */
    @PreAuthorize("@ss.hasPermi('scense:manage:image')")
    @PostMapping("/image/upload")
    public AjaxResult imageUpload( @RequestPart("file") MultipartFile[] uploadFiles)
    {
        return  new AjaxResult(HttpStatus.SUCCESS,"success");

    }
复制代码

 

posted @   BBS_自律  阅读(614)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示