怎么在vue項目中使用elementUI組件手動上傳圖片

怎么在vue項目中使用elementUI組件手動上傳圖片？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

Vue框架簡介

Vue是一套構建用戶界面的框架， 開發只需要關注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。是基于MVVM（Model-View-ViewModel）設計思想。提供MVVM數據雙向綁定的庫，專注于UI層面

使用elementUI上傳圖片時遇到跨域問題，所以需要自己寫一個手動上傳圖片的方法

代碼：

html

  <el-upload
            class="upload-demo"
            ref="upload"//綁定ref 清空時會用到
            :limit="1" //最多可上傳1張
            :http-request="ImgUploadSectionFile" //上傳方法
            :with-credentials="true"
            :auto-upload="true"
            accept=".png,.jpg,.gif,.svg"//上傳文件的后綴名
            action=""//文件上傳地址 我用的手動上傳所以為空
            list-type="list"
            :file-list="fileList">
             <el-button slot="trigger" type="primary">選取圖片</el-button>
           </el-upload>

method

 ImgUploadSectionFile(param){//圖片上傳
      let formData = new FormData();//formdata格式
        formData.append('Img', param.file);
        request.post("url", formData).then(res => {
          if (res.code == 200){//成功
            console.log(res)
          }
        });
    }

我做的是 后臺返回上傳的圖片字符串地址 然后我加到對象中點擊總按鈕時再發送到后臺 所以添加結束之后需要加下面這行代碼

this.$refs.upload.clearFiles();//清空

看完上述內容，你們掌握怎么在vue項目中使用elementUI組件手動上傳圖片的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！