el-upload文件单独上传和同接口信息一起上传

最新推荐文章于 2025-02-24 14:28:45 发布

Beam007

最新推荐文章于 2025-02-24 14:28:45 发布

阅读量1.9k

点赞数

分类专栏： element

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/111042667

版权

这篇博客详细介绍了在Vue中使用el-upload组件实现两种不同的文件上传策略：一是文件单独上传并返回ID，二是信息与文件一同提交。讨论了auto-upload、action、data、http-request等关键属性的使用，并提供了相关代码示例。同时，提到了file-list、disabled、accept等属性的作用，以及文件下载展示的两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求一：

录入信息和图片，分成两个接口，图片选中后直接上传，将返回的ID存入录入信息接口的相应字段。

代码：

<el-form-item label="营业执照" prop="businessLicense">
    <label slot="label">营业执照&emsp;（请上传20M以内的图片）</label>
    <el-upload :disabled="justCheck" ref="proUpload" action="`后台文件上传接口`" list-type="picture-card" :data="uploadParams" :before-upload="beforeUpload" :on-preview="handlePictureCardPreview" :limit="1" :on-exceed="onlyoneUpload" :on-remove="removeUpload" :on-success="successUpload" :file-list="fileList" :accept="fileTypes">
        <i class="el-icon-plus"></i>
    </el-upload>
</el-form-item>

dialogImageUrl: '',
dialogImageVisible: false,
uploadParams: {},
fileList: [],
fileTypes: '.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP'

beforeUpload () {
    this.uploadParams.access_token = window.localStorage.getItem('TOKEN')
    // 校验文件上传类型
    let pic = this.$refs.proUpload.uploadFiles[0]
    let type = pic.name.split('.')[1]
    if (this.fileTypes.indexOf(type) === -1) {
        this.$message.warning('请上传正确的图片格式！')
        return false
    }
},
onlyoneUpload () {
    this.$message.warning('只允许上传一张图片，请删除前者后上传!')
},
removeUpload (file, fileList) {
    thi

最低0.47元/天解锁文章