快捷導(dǎo)航

Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳

更新時(shí)間：2024年03月21日 09:08:36 作者：奈何不吃魚

這篇文章主要介紹了Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳,這里用了elementUI的一個(gè)簡單的例子，給大家介紹的非常詳細(xì)，需要的朋友可以參考下

一、前端代碼實(shí)現(xiàn)

廢話不多說直接上代碼

<el-form-item prop="image" label="上傳圖片" v-model="form.image">
          <el-upload
            :action="'http://localhost:8080/files/upload'"
            list-type="picture-card"
            limit="1"
            :on-exceed="limitError"
            :on-success="imgSuccess"
            :on-error="imgError"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

這里用了elementUI的一個(gè)簡單的例子，自己又改了一些，簡單講解一下

action: 頭像上傳向后端發(fā)送的地址，這里后端采用了本地上傳

list-type: 即文件列表的類型，就是上傳后文件的樣式是圖片還是文字的格式

limit: 上傳數(shù)量的限制，這里僅可上傳一張圖片

on-exceed: 上傳超過限制觸發(fā)的函數(shù)

on-success: 上傳成功觸發(fā)的函數(shù)

on-error: 上傳失敗觸發(fā)的函數(shù)

更多參數(shù)可以參照：組件 | Element

相對應(yīng)的函數(shù)如下：

    // 上傳成功
    imgSuccess(res, file) {
      this.imageUrl = res.data;
      this.form.image = this.imageUrl;
      console.log(res.data);
    },
    // 上傳失敗
    imgError(res) {
      this.$message({
        type: "error",
        message: "附件上傳失敗",
      });
    },
    // 上傳數(shù)量超限
    limitError() {
      this.$message({
        type: "error",
        message: "圖片僅可上傳一張",
      });
    },

比較重要的是上傳成功后的函數(shù)imgSuccess，此函數(shù)需要根據(jù)實(shí)際項(xiàng)目中你的form表單的值或者構(gòu)建的data進(jìn)行綁定操作，確保圖片地址能被后端存儲便于后續(xù)展示

二、后端代碼實(shí)現(xiàn)

/**
     * 文件上傳
     */
    @PostMapping("/upload")
    public Result upload(MultipartFile file) {
        if(file == null || file.isEmpty()) {
            return Result.error(400,"上傳文件為空");
        }
        String flag;
        synchronized (FileController.class) {
            flag = System.currentTimeMillis() + "";
            ThreadUtil.sleep(1L);
        }
        String fileName = file.getOriginalFilename();
        try {
            if (!FileUtil.isDirectory(filePath)) {
                FileUtil.mkdir(filePath);
            }
            // 文件存儲形式：時(shí)間戳-文件名
            FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
            System.out.println(fileName + "--上傳成功");
            System.out.println("文件上傳地址"+filePath);
        } catch (Exception e) {
            System.err.println(fileName + "--文件上傳失敗");
            return Result.error(400,"文件上傳失敗");
        }
        String http = "http://" + ip + ":" + port + "/files/";
        return Result.success(http + flag + "-" + fileName);
    }

很普通的一個(gè)文件上傳接口，僅接收一個(gè)文件流并進(jìn)行本地存儲后名稱為：時(shí)間戳-文件名，

后端進(jìn)行測試沒有問題