vue之input通过formData实现单个文件上传

最新推荐文章于 2024-03-20 15:32:34 发布

tianxinw

最新推荐文章于 2024-03-20 15:32:34 发布

阅读量280

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/T_ianxin/article/details/131372221

版权

<el-image
    style="width: 70px; height: 80px"
    :src="imageUrl"
></el-image>
<div>
    <img alt="" ref="img" />
    <input type="file" ref="file" @change="showimg">
</div>
　<el-button type="primary" @click="submit">确定</el-button>

data () {
    return {
        imageUrl: "",
    }
},
methods: {
    showimg () {
        const that = this;
        var fr = new FileReader()
        fr.readAsDataURL(that.$refs.file.files[0])
        fr.onload = function () {
            that.imageUrl = fr.result;
        }
    }, 
    submit(){
        const file = this.$refs.file.files[0];
        let formData = new FormData()

        // formData.append(name，value)  
        formData.append('file', file)
        formData.append('name', this.dataForm.name)
        formData.append('gender', this.dataForm.gender)
        formData.append('kind', this.dataForm.kind)
        formData.append('age', this.dataForm.age)
        
         // this.$http可以改为axios({})  看个人用法
         this.$http({
              url: this.$http.adornUrl('/device/saveUser'),
              method: 'post',
              data: formData,
              headers: {
                'Content-Type': 'multipart/form-data',
              }
            }).then(({data}) => {
              if (data.code == 0) {
                Message({
                  message: '新增成功',
                  type: 'success'
                });
              } else {
                Message({
                  message: data.msg,
                  type: 'error'
                })
              }
            }).catch(err => {
            })
       }
}