element-ui upload

自定义Vue上传组件

最新推荐文章于 2023-06-26 11:39:44 发布

转载最新推荐文章于 2023-06-26 11:39:44 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alhh/p/9111227.html

文章标签：

#ui #javascript #ViewUI

本文介绍了一种基于Element-UI的自定义Vue上传组件实现，该组件支持图片预览及格式大小验证等功能，并详细展示了如何将文件上传功能整合到产品添加流程中。

之前项目里面需要添加产品，除了添加产品名称等字段外，还要上传产品图片，然后看了element ui 的框架，觉得不太适合，于是自己在element-ui基础上改写了一个组件，见代码

这个是upload.vue组件
<template>
    <el-upload class="avatar-uploader" :disabled="useDisabled" action="" :auto-upload="false" :on-change="submitFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="previewUrl" :src="previewUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
import { Upload } from 'element-ui'
export default {
    props: ['imageUrl', 'useDisabled', 'name'],
    data() {
        return {
            url: undefined,
            disabled: false
        }
    },
    components: {
        "el-upload": Upload
    },
    computed: {
        previewUrl() {
            if (this.url) {
                return this.url;
            }
            let reg = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}(=)?|[A-Za-z0-9+/]{2}(==)?|[A-Za-z0-9+/]{1}(===)?)$/
            if (reg.test(this.imageUrl)) {
                if (this.imageUrl.indexOf('data:image', 0) == -1) {
                    return `data:image/jpeg;base64,${this.imageUrl}`;
                }
            }  //这里的功能主要是修改时候，获取单条产品信息会返回图片字段，这里就不用加上图片base64解析 data:image/jpeg;base64
            return this.imageUrl
        }
    },
    methods: {
        preview(file) {  //这里是预览图片
            var fr = new FileReader()
            fr.onloadend = () => {
                this.url = fr.result;
            }
            fr.readAsDataURL(file.raw)
        },
        submitFile(file) {
            // var formData = new FormData(); //调用接口上传data:formData
            // formData.append('file', file.raw);  //这里要说明一下，如果直接使用element-ui的upload组件的时候，这里的formData字段就是拿到的文件，可以直接传给后台，但是我要把这个上传功能放在页面去处理，于是向上触发了
            this.preview(file);
            this.$emit('uploadFun', {
                name: this.name,
                file
            })
            // console.log(formData)
        },
        handleAvatarSuccess(res, file) {
            this.url = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }

}
</script>

<style>

</style>

引入upload组件后，在addProduct.vue页面中调用

<upload-img v-on:uploadFun="uploadFun" name="productImage" :imageUrl="productImage"> </upload-img>  //这里的productImage就是后台需要的字段

　　uploadFun(file) {

　　this.files[file.name] = file.file.raw;

　　},//upload组件中派发的方法

然后在点击添加产品按钮上绑定函数

   　　　　　 let proInfo = {
      　　　　  product:product
            }
            var formData = new FormData()
            for (let key in this.files) {
                formData.append(key, this.files[key])
            }
            for (let key in proInfo) {
                formData.append(key, proInfo[key])
            }

然后传给后台 formData字段即可。

转载于:https://www.cnblogs.com/alhh/p/9111227.html