VUE 上传图片

js

export default function uploader(obj, files) {
  return new Promise((resolve, reject) => {
    let attachments = new Array()
    let errorCount = 0
    if (files.length > 0) {
      for(let file of files) {
        let formData = new FormData()
        formData.append('file', file)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        obj.$axios.post('/upload', formData, config).then((response) => {
          let data = response.data
          /*if (data.code == 1) {
            let res = {
              'attachmentId': data.data.attachment_id,
              'attachmentSrc': data.data.src
            }
            attachments.push(res)
          }*/
          resolve(data)
        }).catch((error) => {
          reject()
        })
      }
    } else {
      reject()
    }
   
  })
}

 

使用

第一步：引入js

import uploader from '../../uploader.js'

第二步： 添加上传表单

<div class="upload">
          <input ref="uploaderInput" class="upload-file" type="file" accept="image/*" capture="camera" @change="uploadFile()" />
          <div class="start-upload">点击上传头像</div>
          <input type="hidden" v-model="loginForm.avatar" />
        </div>

 

第三步：上传

uploadFile() {
      let files = this.$refs.uploaderInput.files;
      uploader(this, files).then(res => {
        if (res.code == 1) {
          this.avatarSrc = res.data.src
          this.loginForm.avatar = res.data.attachment_id
        }
      })
    },