在完成本機上傳後接著要在新增的表單上做驗證，這部分也需要先修改一下

可以看到在開關顯示的值是True or False，這部分因DB原因要先改成0和1

開啟src/views/modules/product/brand-add-or-update.vue檔案中找到顯示狀態並修改屬性

      <el-form-item label="顯示狀態" prop="showStatus">
        <el-switch
          v-model="dataForm.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item>

測試一下新增功能

新增成功，但因為圖片目前顯示屬於上傳到後端且顯示只是從瀏覽器部分顯示而已，並非實際在後端保存的路徑，且要讓表格中顯示的並非路徑，而是要顯示圖片，這樣才好分辨。

使用ElementUI-Table-Custom column template

其中這一部分的template複製貼上到剛修改的src/views/modules/product/brand.vue檔案中，並且把標籤內的部分修改為ElementUI-image標籤即可

將這一部分的內容貼在template標籤內

        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 80px"
            :src="scope.row.logo"
            :fit="contain"
          >
          </el-image>
        </template>

在src的部分就是要顯示的圖片位置，而fit是圖片要顯示的樣式，完成後儲存並測試看看

測試時發現有錯誤，發現這個元件並沒有註冊在專案中，接下來檢查src/main.js中是否有導入import ‘@/element-ui’，檢查發現有導入(@表示src目錄)，發現此檔案中沒有導入image component，所以必須要其導入，參考ElementUI-Quick Start，這裡是所有的Component，將這些全部複製到src/element-ui/index.js中，

一直複製到框起來的部分，將其內容替換即可並且將 Backtop, PageHeader, CascaderPanel 這三個Component移除，這部分用不到可以先拿掉，儲存後再測試看看

結果測試後還是沒出現，然後發現之前沒寫到下載檔案的部分，所以導致圖片載入都會失敗，因此補上後端下載檔案的部分，在src/main/java/com/cheng/yumall/thirdparty/controller/UploadFileController.java中加入下載檔案方法

@GetMapping("/getFilePath")
    public R fileDownLoad(HttpServletResponse response, @RequestParam("fileName") String fileName) {
        File file;
        try {
            file = new File(filePath, fileName);
            if (!file.exists()) {
                return R.error(-2, "檔案不存在( •́ _ •̀)？".concat(fileName));
            }

            response.reset();
            response.setContentType("application/octet-stream");
            response.setCharacterEncoding("utf-8");
            response.setContentLength((int) file.length());
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
        } catch (NullPointerException ne) {
            return R.error(-9, "檔案不存在( •́ _ •̀)？".concat(fileName));
        }

        try (BufferedInputStream bis = new BufferedInputStream(new FileInputStream(file))) {
            byte[] buff = new byte[1024];
            OutputStream os = response.getOutputStream();
            int i;
            while ((i = bis.read(buff)) != -1) {
                os.write(buff, 0, i);
                os.flush();
            }
        } catch (Exception e) {
            log.error("下載失敗:{}", e.getMessage());
            return R.error(-10, e.getMessage());
        }
        return R.ok().put("filePath", filePath.concat(fileName));
    }

另外上傳的部分也需要修改一下回傳的資料，只需要回傳檔名即可，因為下載時的參數只輸入檔名而已

Map<String, String> map = null;
        if (!Objects.requireNonNull(file.getOriginalFilename()).isEmpty()) {
            try (BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(dest))) {
                bos.write(file.getBytes());
                bos.flush();
                log.info("Upload success");
                map = new HashMap<String, String>() {{
                    put("fileName", fileName);
                }};
            } catch (Exception e) {
                log.error("Upload Fail:{}", e.getMessage());
            }
        }
        return R.ok().put("data", map);

然後前端部分也需要調整，將路徑寫好，並且帶入請求參數

   handleUploadSuccess(res, file) {
      console.log("上傳成功...");
      this.showFileList = true;
      this.emitInput(
        "http://localhost:88/api/thirdparty/local/getFilePath?fileName=" +
          file.name
      );
    },

這樣下載圖片這部分就可以了，另外我使用ElementUI-Image時，發現尺寸或樣式部分調整都無法顯示整個圖片的縮圖，所以因此更換使用一般的img標籤，先將el-image註解，若之後有變動再修改

        <template slot-scope="scope">
          <!-- <el-image
            :src="scope.row.logo"
            fit="scale-down"
          ></el-image> -->
          <img style="width: 100px; height: 80px" :src="scope.row.logo" alt="0">
        </template>

完成後就可以看到縮圖了