Vue el-upload 上传文件

最新推荐文章于 2024-07-05 11:44:35 发布

北岭有燕

最新推荐文章于 2024-07-05 11:44:35 发布

阅读量508

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41160739/article/details/121148211

版权

vue 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

31 篇文章 0 订阅

订阅专栏

自己写的一个小demo,拷贝到html直接打开即可测试运行。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入最新版本样式 -->


    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Document</title>
    <style>
        .content {
            width: 300px;
            height: 50px;
            font-size: 20px;
            display: flex;
            line-height: 50px;
        }

        .contentName {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-col :span="4" :xs="24">
            <el-input v-model="uploadData.msg" type="text" placeholder="所传信息" />
        </el-col>

        <el-upload class="upload-demo" ref="upload" action="URL" :on-preview="handlePreview" :on-remove="handleRemove"
            :on-change="handleChange" :file-list="fileList" :data="uploadData" :auto-upload="false"
            :on-success="success" :multiple="false" :on-error="error">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>

    </div>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入最新版本组件库 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 固定版本样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <!-- 固定版本组件库 -->
    <script src="https://unpkg.com/element-ui@2.12.0//lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                fileList: [],
                // 上传时附带的额外参数
                uploadData: {
                    type: 1,
                    msg: "",

                }

            },
            methods: {
                submitUpload() {
                    // 请求加的参数this.uploadData
                    console.log(this.uploadData)
                    // 看看这个时候的请求地址是否正确上面的action
                    this.$refs.upload.submit();
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                //上传成功时弹框
                success(res, file, fileList) {
                    // 在文件上传成功后,可以从response的data属性获取图片在服务器上的路径,文件的具体信息在file.raw中
                    console.log(res, file, fileList)
                },
                error(err, file, fileList) {
                    console.log(file, "失败信息")
                },
                //上传文件让第二次覆盖第一的文件
                handleChange(file, fileList) {
                    if (fileList.length > 0) {
                        this.fileList = [fileList[fileList.length - 1]]
                    }
                }
            },

        })
    </script>
</body>

</html>