VUE-CLI+elementUI+axios实现图片预览、随表单上传图片文件

最新推荐文章于 2023-06-16 10:11:41 发布

叶锦

最新推荐文章于 2023-06-16 10:11:41 发布

阅读量579

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_41024459/article/details/106827164

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现功能：选择图片后可进行图片预览，点击立即上传后上传图片。

后端接口如下所示：

要点：

action属性不能删，所以随便设置成字符串就好。
手动上传，设置http-request属性。本文设置成"Upload"，所以会去找Upload方法。

<el-form-item label="选择底图" prop="file">
    <el-upload
        class="upload-demo"
        action="a"
        :http-request="Upload"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove"
        :limit="1"
        :on-exceed="handleExceed">
        <el-button type="primary" round>选择底图</el-button>
        <div slot="tip" class="el-upload__tip">图片格式: png ; 宽度: 686pix ; 高度: 400pix</div>
    </el-upload>
</el-form-item>
<el-form-item>
    <el-button type="primary" @click="submitForm(form)">立即上传</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
</el-form-item>

content是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法

之前的一种写法是

<input type="file" id="upload_input" accept="image/png" multiple="" style="margin-left: 10px;height:35px;">

myform.append("uploadFile", document.getElementById("upload_input").files[0]);

但是本文使用elementUI时并没有用到input标签，所以使用axios要这样写：

Upload(content) {
    const file = content.file;// 相当于input里取得的files，这里已经是文件流了
    this.form.data = file;
    updatePic(file.size, file.type)
        .then(() => {
            this.handleAvatarSuccess(content);
        })
    },

这里要强调一下，当使用FormData格式传输文件流时，如下所示，直接将文件流添加到FormData中：

注意上传时，请求头要修改为 ‘multipart/form-data’

就可成功和后端通信了。

export async function uploadImg(form) {
    const app = form.app;
    let param = new FormData();
    param.append("name", form.name);
    param.append("kpn", app[0]);
    param.append("language", form.language);
    param.append("uploadFile", form.data);
    const getUploadImgUrl = '/uploadimg';
    const res = await design_service.request({
        contentType: false,
        processData: false,
        baseURL: getUploadImgUrl,
        timeout: 5000,
        method: 'post',
        headers: { "Content-Type": "multipart/form-data" },
        data: param
    });
    return  res.data
}

补充一些预览图片的前端代码：

handleChange(value){
    this.form.app = value;
},
handleAvatarSuccess(file) {
    this.form.file = URL.createObjectURL(file.file);
},
async beforeAvatarUpload(file) {
    const isPNG = file.type === "image/png";
    if (!isPNG) {
        Vue.prototype.$message({
            message: '上传头像图片只能是 PNG 格式!',
            type: 'error'
        });
    }
    let _this = this;
    let imgWidth = "";
    let imgHeight = "";
    let width = 686;
    let height = 400;
    const isSize = await new Promise(function (resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
            imgWidth = img.width;
            imgHeight = img.height;
            let valid = (img.width === width && img.height === height);
            valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
    }).then(
        () => {
            return true;
        },
        () => {
            _this.$message.error({
                message: '上传文件的图片大小不合符标准,宽需要为' + width + 'px，高需要为' + height + 'px。当前上传图片的宽高分别为：' + imgWidth + 'px和' + imgHeight + 'px',
                btn: false
            });
            return Promise.reject();
        });
    return isPNG && isSize;
},
handleRemove(file, fileList) {
    console.log(file, fileList);
},
handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
resetForm(formName) {
    this.$refs[formName].resetFields();
    this.handleRemove()
},