一般這種上傳檔案相關的業務，都需要兩個url，一個是用來本地預覽的完全url（包含http那種），另一個是用來前後臺通訊的資料url（一般只有一個檔名字，這樣能避免域名和伺服器更換帶來的圖片路徑404bug），有些時候上傳的檔名也需要兩個，用途和url類似，因為，有時候藉助七牛雲等cdn的時候，上傳圖片到人家的伺服器的時候，會根據人家的命名規則改變檔名稱，不利於前臺頁面顯示。

<template>   <div class="uploader">     <div class="uploader-container" :style="{backgroundImage: 'url(' + pictureUrl + ')'}">         <i class="el-icon-plus" :class="showIcon? 'show': 'hide'"></i>     </div>     <input type="file" class="uploader-action" :model="pictureUrl" @change="fileChange" />   </div> </template>

<script>   import axios from "axios";   import {axiosProxyFiles} from "@/api/tool"   export default {     props:{       default: '', // 預設顯示的圖片       index: '' // 如果一個頁面裡用到了多個圖片上傳元件，這個引數用來區別他們     },

    data() {       return {         pictureUrl: '', // 用來預覽的圖片路徑         showIcon: true, // 有圖片的時候顯示圖片，沒圖片的時候顯示成一個加號         picturePath: '' // 傳給介面的那個圖片路徑       };     },

    methods: {       fileChange (e) {         let file = e.target.files[0]         let filename = e.currentTarget.files[0]         var formData = new FormData();         formData.append("file", file);

        // 如果資源傳到自己的伺服器上，需要以上四行程式碼，轉換一下檔案格式，如果直接上傳檔案到cdn，則不需要         let url = YOURURL         axiosProxyFiles.post(url, formData)         .then(res=>{           if(res.data.errorCode=='0'){             this.successMessage('檔案上傳成功')             this.pictureUrl = res.data.data.url             this.picturePath = res.data.data.path             this.showIcon = false             if(this.index) {               this.$emit('change', this.pictureUrl, this.index, this.picturePath)             } else {               this.$emit('change', this.pictureUrl)             }           }           else {             if(res.data.errorMessage) {               this.errorMessage(res.data.errorMessage)             } else {               this.errorMessage('檔案上傳失敗')             }           }         })         .catch(err=>{console.log(err)})       },     },     mounted () {       if(this.default != undefined) {         if(this.default == '') {           this.showIcon = true         } else {           this.showIcon = false         }         this.pictureUrl = this.default       } else {         this.showIcon = true       }     }

}; </script>

// 本demo相關樣式用scss編寫，注意style後面的lang=‘scss’

<style lang='scss' scoped>   .uploader {     position: relative;   }   .uploader-container {     background-color: #fbfdff;     border: 1px dashed #c0ccda;     border-radius: 6px;     -webkit-box-sizing: border-box;     box-sizing: border-box;     width: 148px;     height: 148px;     line-height: 146px;     vertical-align: top;     text-align: center;     background-size: cover;     background-repeat: no-repeat;     background-position: center;     i {       font-size: 28px;       color: #8c939d;     }   }

  .uploader-action {     position: absolute;     top: 0;     opacity: 0;     display: block;     width: 148px;     height: 148px!important;   }

  .hide {     visibility: hidden;   }

  .show {     visibility: visible;   } </style>

下面是axiosProxyFiles的封裝

import axios from "axios"

let axiosProxyFiles = axios.create({   headers: {     'X-Requested-With': 'XMLHttpRequest',     'Content-Type': 'multipart/form-data'   },

// 具體的header內容是啥，取決於你們公司的後臺小哥姐   withCredentials:true, // 開啟cache模式 })

export {     axiosProxyFiles }