vue 文件（图片）上传

标签：技术   image   文件上传   als   length   eid   图片   stty   return   

html~~~~~~

<div>

<a-upload
  listType="picture-card"
  :fileList="fileList"
  @preview="handlePreview"
  @change="handleChange"
  :before-upload="beforeUpload"
>
  <div v-if="fileList.length < 5">
    <a-icon type="plus"/>
    <div class="ant-upload-text">上传</div>
  </div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
  <img alt="预览" style="width: 100%" :src="previewImage"/>
</a-modal>
<span @click=‘handleUp‘>上传</div>

</div>

js~~~~~~

function getBase64 (file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
    })
}

export default {

data () {
    return {

     previewVisible: false,
     previewImage: ‘‘,
     fileList: [],
     fileListIds: [],

}

methods: {

      handleCancel () {
          this.previewVisible = false
      },
      async handlePreview (file) {
          if (!file.url && !file.preview) {
              file.preview = await getBase64(file.originFileObj)
          }
          this.previewImage = file.url || file.preview
          this.previewVisible = true
      },

handleChange ({ fileList }) { // 图片上传
    this.fileList = fileList
    const fileIds = fileList.filter(file => file.id).map(file => file.id)
    const uploadFiles = fileList.filter(file => file.originFileObj)
    if (uploadFiles && uploadFiles.length) {
        const formData = new FormData()
        uploadFiles.forEach(file => {
            formData.append(‘files[]‘, file.originFileObj)
        })
        this.$fileService.post(this.fileService.getBaseUrl(), formData).then(res => { // 后台文件上传地址
            res.forEach(file => {
                fileIds.push(file.id)
            })
           this.fileListIds = fileIds
        }).catch(error => {
            console.error(error)
            this.$message.error(‘文件上传失败‘)
        })
    }
},

beforeUpload () {
    // return false
},

handleUp () {
　　　　　const upimgids = this.fileListIds.join(‘,‘)// 这就是上传给后台的图片id

　　　　　......调接口干其他事比如和表格数据一起上传
}

}

}

vue 文件（图片）上传

标签：技术   image   文件上传   als   length   eid   图片   stty   return   

原文地址：https://www.cnblogs.com/lihong-123/p/13045330.html