elementui怎麼實現圖片上傳到後端

① vue 使用element-ui的el-upload httprequest實現上傳文件到後台的功能

之前做上傳，參考element UI的官方示例，使用action屬性，action是上傳的地址。
這次做的項目，換了一個後端對接，說，上傳不需要調用介面，我懵了，我尋思示例不都是使用了action嘛，經過一番了解，upload組件還提供了http-request覆蓋默認上傳行為。

elementUI 的upload組件的http-request方法的使用

http-request有個默認的參數：content
content是一個object對象：裡麵包含一些upload組件的回調方法，可以使用upload組件原生的方法。

下面記錄下具體使用方法，很簡單
1、

:action是必不可少但是卻沒什麼作悄顫用的

:http-request可以覆蓋默認的上傳方法

2、我配置中兄的:action的值（就是官方文檔示賣運襲例的值）

3、:http-request函數內容，將上傳成功的文件保存到mode裡面，mode是自己在data裡面定義的變數，初始值是mode:{}

4、上傳按鈕的點擊事件

5、上傳成功，後台可以讀取到數據

② vue + elementui upload上傳圖片到伺服器以及保存後回顯問題

前言：
關於鍵鎮vue和elementui安裝導入使用不做介紹

1.template中首先展示upload多張圖片上傳

2.當稿悄粗upload組件發生改變時處罰addFile

3.圖片提交到伺服器，拿到伺服器的數據地址

3.顯示圖片 將拿到的數據放進一個數組中顯示到file-list中去就好了

至此，完結。
有運猛不對的地方歡迎指導哦。

③ 如何使用element-ui的upload組件實現上傳文件到七牛

具體實現

1. 在創建存儲空間的時候，可以選擇私人空間，但是圖片的外鏈訪問都需要秘鑰，公共空間則不需要。

   

2. 生成token後，就可以實現上傳了。

④ element ui之圖片上傳以base64的格式傳給後端

        upload上傳組件默認以文件流的方式傳給後端，如果需要改變文件格式，則要設扒腔圓置auto-upload="false"阻止自動上傳，使用on-change方法獲得上傳的文件並進行相應的處理。圓梁具體流程如下：

        寫一個getBase64方法，將文件格式轉化春塌為base64。

            在上傳文件變化時，調用getBase64方法 獲取轉化後的base64數據。

⑤ vue element-ui 上傳圖片到oss阿里雲(第三方服務)

一、阿里雲設置：

8.1 進入 OSS 管理控制台 界面。

8.2 在左側存儲空間列表中，單擊目標存儲空間名稱，打開該存儲空間概覽頁面。

8.3 單擊 基礎設置 頁簽，找到 跨域設置 區域，然後單擊 設置。

8.4 單擊 創建規則，打開 設定跨域規則 對話框。

8.5 設置跨域規則。

8.6 單擊 確定。
說明： 您也可以對已有的規則進行編輯和刪除操作。

截止到這里，阿里雲創建Bucket、角色、授權、跨域等前期准備工作就全部完成了。

二、安裝使用：

⑥ vue2.x，element-ui 中上傳圖片組件（圖片查看，已有圖片渲染）

1、基本標簽結構

<el-upload name="picture" 

            :action="'/api/image/upload?imageType=xxx" 

            accept=".jpg, .png"      

            list-type="picture-card" 

           :limit="1"    

           :file-list="filelists"

            :on-exceed="onExceed" 

     並飢       :before-upload="beforeUpload"  

            :on-preview="handlePictureCardPreview"      

            :on-success="imagesuccess"   

            :on-remove="handleRemove">

            <i class="el-icon-plus"></i>  

 </el-upload>

<!--預覽-->

<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="預覽">

                <img width="100%" :src="imagePreviewUrl" alt="">

</el-dialog>

方法示例：

onExceed(files, fileList) { 

                this.$message({

                        type: 'info',

                        message: '最多隻能上傳一個圖片',  

                        ration: 6000

                });

},

beforeUpload(file) {

                const isJPG = file.type === 'image/jpeg'  

              轎蔽宏  const isGIF = file.type === 'image/gif'  

                const isPNG = file.type === 'image/png'

                const isBMP = file.type === 'image/bmp' 

                const imgSizeLimit= file.size  < 1*1024*1024;

                if (!isJPG && !isGIF && !isPNG && !isBMP) {

             閉冊        this.$message.error('上傳圖片必須是JPG/GIF/PNG/BMP 格式!'); 

                }

                if (!imgSizeLimit) { 

                        this.$message.error('上傳圖片大小不能超過 1MB!');

                }

                return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit;                                                                                                                           }, 

handlePictureCardPreview:function(file){

        //todo

 },

imagesuccess:function(response, file, fileList){

         //todo

         this.filelists  = [];

          this.filelists  = [file]

 },

handleRemove:function(file, fileList){

           //todo

 },

2、action為後台上傳圖片介面

      file-list為文件列表

      limit為設置的可上傳文件的最大個數

      onExceed上傳的文件個數超出設定時觸發的函數，參數為上傳的文件file和文件列表 filelists  

      beforeUpload文件上傳前執行，參數為上傳的文件file，如果返回false或者返回Primary且被reject，則停止上傳

      handlePictureCardPreview圖片預覽時觸發，參數為上傳的文件file，

      imagesuccess圖片上傳成功時觸發參數response, file, filelists  

      handleRemove移除圖片時觸發，參數為file, filelists  

3、已有圖片渲染問題：

自己在實際開發過程中，會遇到編輯情況，並且已經存在一張圖片，想要放到圖片組件中，可以調用組件里聲明的方法。

由於是新手，組件使用不熟練，所以我將圖片的顯示與上傳等操作分離，單獨自己去展示，上傳時再使用組件上傳，使用組件的:show-file-list="false"屬性來隱藏組件自帶的圖片展示功能。

後來發現自己可以自己初始化filelists列表，來使已存在的圖片文件放入組件中，放入的對象當然時文件，但是我後台只有圖片地址，如何拼出一個file格式對象來呢？通過debug，我發現上傳的文件格式對象有好多屬性，當然，存在url這個屬性就可以通過組件進行展示。最簡單的一種方式就是直接創建一個只有一個url屬性的對象var file = {     url:this.showDetailForm.profilePhotoPath     }    this.filelists.push(file)  然後push到文件列表，就可以在組件中進行渲染，對圖片的操作可以使用聲明的方法+表單屬性來實現業務的全過程（當然，這樣渲染的文件只有url，沒有其他屬性，比如文件大小，涉及到其他屬性的函數都沒辦法調用）

⑦ element UI使用Upload 上傳視頻，圖片

elementUI中 upload 的地址： https://element.eleme.cn/#/zh-CN/component/upload  大家可以參考官方文檔

這里我使用的是照片牆這個屬性：list-type

```javascript

<el-upload

  name="fileUpload"//上傳文件的欄位名字由後台提供

  :data="folderName"//文件存儲的文件夾

  :action="這里的介面是後台提供的"

  list-type="picture-card"

  :on-success="successUpdata"

  :on-preview="handlePictureCardPreview"

  :on-remove="handleRemove">

<i class="el-icon-plus"></i>

</el-upload>

data{

folderName: {folderName:'ycylManage'},

}

methods: {

handleRemove(file, fileList) {

console.log(file, fileList);

},

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url;

this.dialogVisible =true;

},

//上傳成功的方法

successUpdata(file){

this.headImg = file.paths[0]   //返回的是圖片的路徑

},

圖片示例：

經過滑培試驗這個上信睜唯傳是可以上傳早孝視頻的，所以推薦大家用這個，上傳圖片與上傳圖片是一樣的