vue.js+axios+element-ui實現表單與多圖（多文件）一起提交！

開心ing！爸爸和後臺小哥哥研究了2天最後終於成功了！

實現功能： 一次性提交多張圖片和表單數據

問題點： 在vue.js環境下，使用elemnet-ui的上傳組件樣式，（上傳組件功能只能一個一個上傳，沒辦法組合成一個整體發送給後臺小哥哥），單個上傳的話，又會覆蓋上一個。

原理： 先把上傳文件整合成一個數組對象（push方法）、再把數組對象遍歷一遍（foreach方法）、遍歷過程中把上傳文件獨立命名（獨立命名：命名規則需要和後臺小哥哥對接一下哦）。

效果圖：



代碼塊：

html代碼

    <div id="upload">
      <!--elementui的上傳圖片的upload組件-->
      <el-upload class="upload-demo"
                 ref="upload"
                 list-type="picture-card"
                 action="/ApiUrl?s=/api/sudoku/uploadClock"
                 :limit="9"
                 :on-preview="handlePictureCardPreview"
                 :before-upload="beforeupload"
                 :on-exceed="exceedHandle"
                 :auto-upload="false"
                 :multiple='true'>
        <i class="el-icon-plus"></i>
      </el-upload>
      <!--展示選中圖片的區域-->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="dialogImageUrl"
             alt="">
      </el-dialog>
      <!--elementui的form組件-->
      <el-form ref="form"
               :model="form"
               label-width="80px">
        <el-form-item label="活動名稱">
          <el-input v-model="form.name"
                    name="names"
                    style="width:360px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">立即創建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

js代碼塊：

<script>
import { mapMutations } from 'vuex' // 判斷token
import axios from 'axios' // 引入axios
axios.defaults.withCredentials = true // 引入axios
export default {
  data () {
    return {
      company_id: '10001',
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      form: {// form裏面的參數
        name: ''
      },
      param: '', // 表單要提交的參數
      src: '' // 展示圖片的地址
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    // 1，上傳前移除事件
    beforeRemove (file, fileList) {
      return this.$confirm(`確定移除 ${file.name}？`)
    },
    // 2，上傳前事件
    beforeupload (file) {
      // 2.1，重新寫一個表單上傳的方法
      this.param = new FormData()
      this.fileList.push(file) // 把單個文件變成數組
      let images = [...this.fileList] // 把數組存儲爲一個參數，便於後期操作
      // 2.2，遍歷數組
      images.forEach((img, index) => {
        this.param.append(`img_${index}`, img) // 把單個圖片重命名，存儲起來（給後臺）
      })
      return false
    },
    // 3，點擊文件列表中已上傳的文件時的鉤子
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 4，表單提交的事件
    onSubmit () {
      let _this = this
      var names = _this.form.name
      this.$refs.upload.submit()
      // 4.1，下面append的東西就會到form表單數據的this.param中；
      this.param.append('company_id', _this.company_id)
      this.param.append('caption', names)
      this.param.append('token', localStorage.getItem('Authorization'))
      // 4.2，賦予提交請求頭，格式爲：'multipart/form-data'（必須！！）
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // 4.3，然後通過下面的方式把內容通過axios來傳到後臺
      axios.post('/ApiUrl?s=/api/sudoku/uploadClock', this.param, config).then(function (result) {
        console.log(result)
      })
    },
    // 5設置超過9張圖給與提示
    exceedHandle () {
      alert('您現在選擇已超過9張圖，請重新選擇')
    }
  }
}
</script>

總結： 只是做個記錄，比心心