node+express+element选取图片提交上传服务器

Vue文件上传组件实践

最新推荐文章于 2025-02-11 13:42:04 发布

原创最新推荐文章于 2025-02-11 13:42:04 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #Node

后端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用Vue的文件上传组件实例，详细展示了如何通过El-upload实现图片上传功能，包括设置请求头、限制文件类型及大小、预览、移除和上传到服务器等操作。

注意请求头，若不写，则服务会拒绝

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://127.0.0.1:3000/users"
      accept="image/png,image/gif,image/jpg,image/jpeg"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

调试返回数据情况，若返回证明上传成功

<script>
    export default {
        data() {
            return {
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                console.log(res)
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        }
    }
</script>