• vue+element_ui上传文件,并传递额外参数(自动上传)


                                <el-upload
                                    action="api_ws/api/Contract/AttachmentUpload"
                                    list-type="picture-card"
                                    :limit="1"
                                    :auto-upload="true"
                                    :before-upload="beforeUploadForm"
                                    :http-request="imageChange"
                                >
                                    <div>上传文件</div>
                                </el-upload>
            // 开始上传前验证
            beforeUploadForm (file) {
                // 验证文件类型
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = testmsg === 'jpg' || testmsg === 'png' || testmsg === 'gif'
                if (!extension) {
                    this.$message({
                        message: '上传文件只能是jpg/png/gif格式!',
                        duration: 1000,
                        showClose: true,                
                        type: 'warning'
                    })
                }
                return extension
            },
    
            // 提交图片
            imageChange(param,type){
                // console.log(param);
                let formData = new FormData()
                formData.append('files', param.file)
                formData.append("fileId", '文件ID)// 额外参数
                thiz.$axios.post('http://localhost:8080/upload/file', formData).then(res => {
                    // console.log(res);
                    if (res.IsSuccess) {
                        this.imgList.push(res.Data.Data)
                    }
                });            
                // console.log(this.imgList);
            },
  • 相关阅读:
    mysql之drop、truncate和delete的区别
    mysql之表结构,表空间,段,区,页,MVCC(待整理)
    mysql之子查询、视图、事务及pymysql等
    mysql之单表查询、多表查询
    解决跨域问题!
    项目--2
    项目--1
    后端接口书写
    VUE-组件
    VUE基本写法
  • 原文地址:https://www.cnblogs.com/zwhbk/p/13359198.html
Copyright © 2020-2023  润新知