vue+element-ui form表单嵌套upload实现图片上传

最新推荐文章于 2023-12-19 23:41:38 发布

你在找森么哩

最新推荐文章于 2023-12-19 23:41:38 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： vue 前端

本文链接：https://blog.csdn.net/zhaoxinha/article/details/124384181

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何利用Element-UI的el-upload组件进行图片上传，并将上传成功的URL自动填充到input框中，作为表单的一部分提交。过程中涉及到文件类型检查、axios请求、响应处理及SessionStorage的使用。

摘要由CSDN通过智能技术生成

upload上传之后服务器返回一串url，然后将url自动填入input框，随form表单一起提交到服务器

<el-form-item label="头像" prop="head">
                    <!-- <el-input v-model="addForm.head"></el-input> -->
                    <div class="el-upload-img">
                        <el-upload
                            :http-request="onImport">
                            <el-button slot="trigger" size="mini" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                     </div>
                     <el-input v-model="addForm.head"></el-input>
 </el-form-item>

method里：

//图片上传
        async onImport({ file }) {
            let isImage = ['png', 'jpeg', 'jpg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
            let form = new FormData()
            let arr = file.name.split('.')
            let suffix = arr[arr.length - 1]
            if (isImage.indexOf(suffix) == -1) {
                return this.$message.error('文件格式错误')
            }
            form.append('file', file)
            const {data:res} = await this.$http.post('/pic/uploadImg',form)

            console.log(res)
            if (res.status == 200) {
                this.$message.success('上传成功')
                this.imageUrl = res.data
                console.log(this.imageUrl)
                window.sessionStorage.setItem("head",res.data);
                this.addForm.head=res.data
                // addForm.head = this.imageUrl
                // console.log(addForm.head)
                // this.$emit('success')
                } 
            else {
                this.$message.error('上传失败')
                }
            
            },