简单记录一下原生上传图片和element 文件流上传方式

最新推荐文章于 2025-03-24 11:18:43 发布

浪里白条那片海

最新推荐文章于 2025-03-24 11:18:43 发布

阅读量571

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_37806077/article/details/128398340

版权

一、element上传方式

html部分需要什么方式就把另外方式代码注释掉

<!--element上传方式-->

                            <el-upload
                                style="display: inline-block"
                                class="avatar-uploader"
                                :http-request="versionUploadHandle"
                                action="#"
                                :show-file-list="false"
                                :accept="isAccept"
                                multiple>
                            <el-button slot="trigger" type="primary" icon="el-icon-upload"             @click="upload_img">上传图片
                            </el-button>
                            <el-button slot="trigger" type="primary" icon="el-icon-upload" @click="upload_zip">上传压缩包
                            </el-button>
                        </el-upload>

js部分

upload_img () {
        console.log('上传图片')
        this.isAccept = '.svg'
      },

// 上传压缩包
      upload_zip () {
        console.log('上传压缩包')
        this.isAccept = '.zip'
      },

versionUploadHandle (param) {

        let file = param.file
        let fm = new FormData()
        fm.append('files',files)
        fm.append('files',file)
        fm.append("libId",this.dataLi.id)// 需要传给后端的关联文件id，后端没要求 可不写
        fm.append("fileType",this.isAccept==='.zip'?'ZIP':'SVG') // 需要传给后端的文件类型，后端没要求 可不写
        console.log(fm)
       
        this.$http.post('你的接口', fm).then(({ data: res }) => {
          

        }).catch(() => {
        })
      },

二、原生上传方式

<input
                                type="file"
                                name="avatar"
                                style="display:none"
                                accept=".svg"
                                @change="versionUploadHandle($event)"
                                multiple
                                ref="avatarInput" />
                        <el-button type="primary" icon="el-icon-upload" @click="upload_img">上传图片</el-button>

// 上传图片
      upload_img () {
        console.log('上传图片')
        this.isAccept = '.svg'
        this.$refs.avatarInput.click()
      },

versionUploadHandle (param) {

        let file = param.file
        let fm = new FormData()
        let files = param.target.files;
        console.log(files)

        for(let key  in files){
          fm.append('files',files[key])
        }
        fm.append("libId",this.dataLi.id)
        fm.append("fileType",this.isAccept==='.zip'?'ZIP':'SVG')
        console.log(fm)
        this.$http.post('你的接口', fm).then(({ data: res }) => {
          
        }).catch(() => {
        })
      },