一、DOM內(nèi)容的添加

在Vue中，說DOM的添加總感覺有點(diǎn)別扭，因?yàn)槲覀兯鶗鴮懙腍TML DOM部分，是放置在template模板里的，而這里的模板內(nèi)容離真實(shí)的DOM其實(shí)還有很多步驟。不過這里先略過這些，我們就以DOM為例。

1. 上傳按鈕和圖片預(yù)備容器

在真實(shí)的項(xiàng)目中，用戶點(diǎn)擊的必定不是那個(gè)比較丑陋的input file組件，而是提供一個(gè)對用戶非常友好的上傳按鈕。然后再放置一個(gè)DIV元素，用來預(yù)備存放上傳成功后的圖片，以達(dá)到預(yù)覽的效果。

本小節(jié)暫時(shí)不用真實(shí)的業(yè)務(wù)組件來開發(fā)，先做一個(gè)小例子，一旦做成了，下一節(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內(nèi)容說明 

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

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

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

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

二、上傳事件說明

1. 上傳事件準(zhǔn)備

圖片上傳是一種行為，是一系列事件。而我們上面說，要通過點(diǎn)擊“上傳圖片”按鈕，去觸發(fā)type="file"的原生組件，而原生組件被觸發(fā)上傳的重點(diǎn)在于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)系技術(shù)人員');
      })
    }
  }

2. 上傳事件說明 

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

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

三、axios上傳零件

因?yàn)橹暗恼鹿?jié)，把a(bǔ)xios功能解耦封裝的過程已經(jīng)說過了，而且項(xiàng)目搭建之初做一個(gè)很好的整理，對項(xiàng)目實(shí)戰(zhàn)過程也是事半功倍的。

1. 引入 uploadFile 上傳方法

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

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

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

新建 /src/api/uploadImage.js文件，這里是 uploadFile 方法的具體實(shí)現(xiàn)，而剛才HelloWorld.vue中是業(yè)務(wù)組件的引用，這里要區(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上傳的具體實(shí)現(xiàn)，而需要注意的幾點(diǎn)就是：

• request 的引入，這里因?yàn)閔ttpRequire.js已經(jīng)實(shí)現(xiàn)完成了，保證每次新建實(shí)現(xiàn)文件，引入就好了
• URLS，是對請求url做了一個(gè)統(tǒng)一的管理，每個(gè)ajax請求會不一樣；
• 整理過后的data入?yún)?shù)據(jù)也很方便，直接在業(yè)務(wù)組件中整理好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',     // 上傳圖片
}

四、實(shí)現(xiàn)效果展示

1. 上傳前

上傳前，是一個(gè)上傳按鈕，一個(gè)預(yù)備DIV元素，如圖：

2. 上傳請求

上傳過程中headers有個(gè)關(guān)鍵的參數(shù)tgCsrfToken，用于判斷當(dāng)前用戶是否處于登錄狀態(tài)

  3. 上傳后預(yù)覽

上傳后，服務(wù)端已經(jīng)將圖片存儲起來，并且把存儲的服務(wù)器圖片鏈接返回來了，剛才我們在代碼中用了 this.upImage = res.data;  應(yīng)該還記得吧。到這里，我們這一節(jié)的內(nèi)容就算成功結(jié)束了。

五、本小節(jié)的周邊

依照慣例，我們在文章末尾提出一些關(guān)于本文的思考題，這些題和文章內(nèi)容一樣重要。而且這些思考題很有意思，每隔一段時(shí)間再回過頭來看得時(shí)候，總會有新的想法，新的解釋，提醒自己再不斷地前行著

• 如果讓你設(shè)計(jì)一個(gè)圖片上傳組件，封裝起來，你準(zhǔn)備如何做？
• 你覺得把一個(gè)圖片存到數(shù)據(jù)庫里，應(yīng)該怎么存？
• FormData有什么用？請說出自己的理解
• 如果不用axios上傳圖片，用jQuery來做呢，怎么做？
• 如何實(shí)現(xiàn)多圖片上傳？

到此這篇關(guān)于Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能的項(xiàng)目實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Vue FormData axios圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論