Vue+FormData+axios實現(xiàn)圖片上傳功能的項目實戰(zhàn)

更新時間：2023年06月21日 08:34:52 作者：經(jīng)海路大白狗

本文主要介紹了Vue+FormData+axios實現(xiàn)圖片上傳功能的項目實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、DOM內容的添加

在Vue中，說DOM的添加總感覺有點別扭，因為我們所書寫的HTML DOM部分，是放置在template模板里的，而這里的模板內容離真實的DOM其實還有很多步驟。不過這里先略過這些，我們就以DOM為例。

1. 上傳按鈕和圖片預備容器

在真實的項目中，用戶點擊的必定不是那個比較丑陋的input file組件，而是提供一個對用戶非常友好的上傳按鈕。然后再放置一個DIV元素，用來預備存放上傳成功后的圖片，以達到預覽的效果。

本小節(jié)暫時不用真實的業(yè)務組件來開發(fā)，先做一個小例子，一旦做成了，下一節(jié)圖書信息上傳就可以直接使用了。打開 /views/HelloWorld.vue 文件，書寫以下DOM代碼：

<el-button @click="uploadImage">上傳圖片</el-button>
    <p>展示圖片：<p>
    <div style="width: 300px;height: 300px;border: 1px solid #CCC;">
      <img :src="upImage" v-if="upImage" style="width: 300px;height: 300px;" />
    </div>
    <input ref="imgFile" type="file" 
      name="file" accept="image/png,image/gif,image/jpeg,image/jpg" 
      @change="go2UploadImg($event)" style="display: none;">

2. DOM內容說明

el-button做為用戶點擊的“上傳按鈕”；
DIV元素用來預備預覽存放上傳后的圖片；
img元素，我們用v-if=“upImage”做為顯示判斷，如果不做判斷，在上傳圖片前會是一個叉叉的錯誤圖片；
input type="file"組件是HTML原生的Input組件，也是圖片上傳中重要的一個環(huán)節(jié)，用來選取本機系統(tǒng)中的圖片
一般用戶不直接點擊input type="file"的組件，而是采用點擊正常按鈕，點擊的同時主動觸發(fā)上傳組件，而后通過change事件做上傳實現(xiàn)；
accept屬性表示可上傳圖片的類型，本例中可選擇系統(tǒng)中png gif jpeg jpg這4類圖片

3. 數(shù)據(jù)依賴的添加

新學習Vue的小伙伴可能還不太習慣，什么data數(shù)據(jù)，什么數(shù)據(jù)依賴，什么雙向綁定，就不能說人話嗎？的確如此，越接觸破詞越多，總是有那么多人喜歡造詞。

好吧，說遠了，我們上面說到img元素在還沒有賦值的時候，會是叉叉，很不友好。所以添加了v-if="upImage"的判斷。這里的upImage就是依賴于數(shù)據(jù)渲染的變量，而說到數(shù)據(jù)依賴，要想到Vue組件中下面這處代碼，data函數(shù)中的數(shù)據(jù)就是所謂的數(shù)據(jù)依賴

二、上傳事件說明

1. 上傳事件準備

圖片上傳是一種行為，是一系列事件。而我們上面說，要通過點擊“上傳圖片”按鈕，去觸發(fā)type="file"的原生組件，而原生組件被觸發(fā)上傳的重點在于change事件，這里注意，click事件只是去觸發(fā)選擇，說白了就是通過代碼悄悄的觸碰一下上傳組件，代碼如下

methods: {
    uploadImage() {
      this.$refs.imgFile.click();
    },
    go2UploadImg(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);
      uploadFile(formData).then((res) => {
        this.upImage = res.data;
      }).catch(() => {
        console.log('圖片上傳異常，請聯(lián)系技術人員');
      })
    }
  }

2. 上傳事件說明

uploadImage方法中，我們采用refs的方式獲取type="file"組件，并且使用click的方式，觸發(fā)組件的選擇功能；

而被處罰的change事件go2UploadImg，才是重點所在。我們通過new FormData對象，在對象中將圖片文件信息存進去，做為入?yún)ⅲ{用接口進行上傳。

三、axios上傳零件

因為之前的章節(jié)，把axios功能解耦封裝的過程已經(jīng)說過了，而且項目搭建之初做一個很好的整理，對項目實戰(zhàn)過程也是事半功倍的。

1. 引入 uploadFile 上傳方法

在/views/HelloWorld.vue 文件中，引入uploadFile方法，用于業(yè)務組件中上傳調用，代碼如下：

import { uploadFile } from '@/api/uploadImage.js';

2. 添加 uploadFile 實現(xiàn)代碼

新建 /src/api/uploadImage.js文件，這里是 uploadFile 方法的具體實現(xiàn)，而剛才HelloWorld.vue中是業(yè)務組件的引用，這里要區(qū)分開，代碼如下：

import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';
// 上傳圖片
export function uploadFile(data) {
    return request({
        url: URLS.upFile,
        method: 'post',
        data,
    });
}

api目錄下的文件，之前的章節(jié)說過，會做一些ajax上傳的具體實現(xiàn)，而需要注意的幾點就是：

request 的引入，這里因為httpRequire.js已經(jīng)實現(xiàn)完成了，保證每次新建實現(xiàn)文件，引入就好了
URLS，是對請求url做了一個統(tǒng)一的管理，每個ajax請求會不一樣；
整理過后的data入?yún)?shù)據(jù)也很方便，直接在業(yè)務組件中整理好json數(shù)據(jù)就可以了

3. 添加url管理

打開 /src/config/httpUrl.js 文件，添加新的上傳接口url即可，代碼如下：

import { HPPT_IP } from "./httpIp";
export const URLS = {
  testPost: HPPT_IP + '/admin/book',    // post測試路徑
  testGet: HPPT_IP + '/admin/book',     // post測試路徑
  login: HPPT_IP + '/auth/login',       // 登錄接口
  logout: HPPT_IP + '/auth/logout',     // 登出接口
  upFile: HPPT_IP + '/upload/image',     // 上傳圖片
}