iView upload组件手动上传、图片预览

最新推荐文章于 2024-04-30 10:48:26 发布

原创最新推荐文章于 2024-04-30 10:48:26 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

13 篇文章

订阅专栏

本文档介绍了如何使用iView Upload组件实现手动上传和图片预览功能。在手动上传部分，展示了如何阻止默认上传流程并自定义上传操作。同时，提供了手动上传图片后的预览方法，利用FileReader读取文件并转换为base64显示。此外，还分享了动态修改上传数据及后台接收测试代码的相关细节。

iView upload组件手动上传、图片预览

手动上传

iview文档中并没有实际的上传操作

实现

<Upload
        ref="upload"
        :format="['jpg','jpeg','png']"
        :before-upload="handleUpload"
        type="drag"
        :show-upload-list="false"
        :action="actionUrl"
        :data="uploadData">
    <Button icon="ios-cloud-upload-outline">选择文件</Button>

handleUpload(file) {
    this.file = file
    return false
    //通过return false阻止上传流程
},
upload() {
    //附带参数
    this.uploadData.id=1
    this.uploadData.type=3
    //通过refs上传文件
    this.$refs.upload.post(this.file)
}

手动上传图片展示

<FormItem label="图片" prop="image">
    <div>
        <img v-if="uploadFiles.image" :src="uploadFiles.image">
    </div>
    <Upload
            ref="upload"
            :format="['jpg','jpeg','png']"
            :before-upload="handleUpload"
            type="drag"
            :show-upload-list="false"
            :action="actionUrl"
            :data="uploadData">
        <Button icon="ios-cloud-upload-outline">选择文件</Button>
    </Upload>
</FormItem>

handleUpload(file) {
    this.file = file

    const _this = this
    const reader = new FileReader()
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        // 文件base64
        const fileBase64 = this.result
        _this.uploadFiles.image = fileBase64
    }
    //阻止上传流程
    return false
},