文件、圖片、視頻上傳怎么傳

文件上傳怎么傳

 

前言：周五的時候有了一個新的需求，要求上傳圖片和視頻，

初次嘗試的我屢屢遇坑，下面給大家分享我的心歷路程(yun tou zhuan xiang)

 

傳輸的內容：

首先我們要確定傳輸的內容，如果傳輸的內容不對的話，我們寫的再對也沒有用

那么傳輸什么樣的數據應該是什么樣的呢？

當顯示出(binary)就代表我們傳輸的內容是正確的了，否則不要談別的了。

 

 

如何正確獲取傳輸內容：

那么現在我們明確給接口傳遞的數據的形式了，我們怎么獲取到正確的傳輸內容呢？

vue有常用的組件庫，

因為我平時做的都是pc端的東西所以用的是element-ui，element-ui為我們提供了一個很好用的上傳組件，

但是需要認真看他的文檔，看不懂文檔是寫不出來的(不蠻各位，我一開始沒看懂😢)

就是這個可愛的小組件

 

 多種形式任你挑任你選總有一款適合你

         <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"

　　　　　　　　 :on-change="onUploadChange"

            :on-remove="handleRemove"
            :file-list="fileList2"
            list-type="picture">
            <el-button size="small" type="primary">上傳</el-button>
          </el-upload>

我用的這一個，重點來了，我這里顯示了圖片，讓我圖片顯示的

//就是這個
:file-list="fileList2"
list-type="picture"

更重點的來了，我們要扯回一開始的主題，怎么獲取要傳輸的內容，

這個組件為我們提供了許許多多的鈎子和方法，

比如：

:on-change="onUploadChange"

//當你上傳圖片時，由於發生了改變，因此會觸發這個函數
//這個函數有兩個參數，這兩個參數分別是file和fileList
//file就是你最近更新的圖片信息
//fileList是你上傳所有圖片的數組信息

我們打印出來看一看

這是file打印出來的內容

這是fileLIst打印出來的內容

而我們需要的內容就是file.raw

 

 

接口傳值：

接口傳值，此處我們定的是formData的格式。

但是上傳不能像平常那樣body傳值，

我們需要formData : new FormData(),

    onUploadChange(file,fileList) {
      this.formData.append("images", file.raw);
    },

當我們點擊提交的時候，此處使用axios請求接口

await axios.post('/rfid/api/v1/goods', this.formData).then((res) => { console.log(res)}) 

 

 

不用組件用input可以么：

如果重多組件沒有我們的菜，自己用input寫一個也無妨

<input class="video_file" type="file" @change="tirggerFile($event)"/>

同理，使用@change獲取到我們要傳遞的內容

 tirggerFile(event){
     this.formData.append('video',event.target.files[0])
     console.log(event.target.files[0])
 }

 就是我們要獲取的內容 event.target.files[0]

 

 

傳遞多個圖片：

當我們需要傳遞多個圖片的時候，可以在組件加一個屬性，

multiple


即為
<el-upload
            class="inline-upload"
            action=""
            multiple
            :on-change="onUploadChange"
            :on-remove="handleRemove"
            :auto-upload="false"
            list-type="picture"
            :file-list="fileList2">
            <el-button size="small" slot="trigger" round icon="el-icon-plus">上傳</el-button>
</el-upload>

此處有一個坑，我一開始總以為，圖片要一個一個傳，

然后最后都傳給后端接口，這樣就可以顯示多張圖片，

但是一張一張傳你會發現后一張總會把前一張給覆蓋掉，

因此其實此處的多張上傳是同時上傳好幾張圖片，上傳的時候按住shift即可上傳多張，

此處仍然是將file.raw傳給后端即可。

 

 

上傳視頻：

上傳視頻和上傳圖片原理是一樣的，可共用上述內容，

如果你像要做一些限制，可以通過accept來限制你上傳的文件類型以此區別圖片和視頻

accept

接受上傳的文件類型（thumbnail-mode 模式下此參數無效）

string

—

—

 

 

 

編碼64：

onUploadChange(file,fileList) {
      // let me = this;
      // let reader = new FileReader();
      // reader.readAsDataURL(file.raw);
      // reader.onload = function (e) {
      //   // console.log(this.result)//圖片的base64數據
      //   me.base64.push(this.result)
      // }
}

 

 

 

 

以上。

如有疑問歡迎溝通。