axios在vue中文件上传02

最新推荐文章于 2024-04-22 20:11:02 发布
最新推荐文章于 2024-04-22 20:11:02 发布
阅读量468 收藏
点赞数
分类专栏： # vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixiyuguang/article/details/105489227
版权

目录

1、提交方式1--使用el自定义的action的提交

2、提交方式2--使用el的http-request自定义的action的提交

3、提交方式3--使用this.$refs去获取

 

 

1、提交方式1--使用el自定义的action的提交

 
<el-form :model="form" id="upload_form">
<el-upload ref="myupload"
                 name="file"
                            action="http://127.0.0.1:8080/xxx-cms/file/uploadFile"
                            accept="image/png,image/jpg,image/jpeg"
                            list-type="picture-card"
                           :limit=2
                           :auto-upload="false"
                           :on-exceed="handleExceed"
                           :before-upload="handleBeforeUpload"
                           :on-preview="handlePictureCardPreview"
                           :on-remove="handleRemove"
                           :on-success="handleAvatarSuccess"
                           :on-error = 'errorTest'
                           :on-progress = 'progress'
                            
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
            </el-form>
 
<script>
    import axios from "axios";
    export default {
          data() {
            return {
                limitNum: 2,                            
                // nodeFile:'http://127.0.0.1:8080/xxx-cms/file/uploadFile',
                nodeFile:'http://10.204.5.9:8070/xxx-cms/file/uploadFile',
                image_url:''
            }
        },
        methods: {
            // 上传文件之前的钩子
            handleBeforeUpload(file) {
                console.log('handleBeforeUpload');
                if (!(file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/jpg, image/jpeg的图片'
                    })
                }
                let size = file.size / 1024 / 1024 / 10;
                if (size > 10) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于10M'
                    })
                }
            },
            // 文件超出个数限制时的钩子
            handleExceed(files, fileList) {
                this.$notify.warning({message: '只允许上传一张图片'})
            },
            // 文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            // 点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //自带的上传上传成功的回调方法
            handleAvatarSuccess(response, file, fileList) {
                console.log("handleAvatarSuccess-------");
                console.log(response);
                 //将成功之后的回调带过来
                 this.image_url = response.httpPath
                console.log(file);
                console.log(fileList);
            },
            uploadFile() {
                // 触发提交的操作
                console.log('触发-----------uploadFile----------------');
                this.$refs.myupload.submit();
            },
            errorTest(a,b,c){
                console.log(a);
                console.log(b);
                console.log(c);
            },
            progress(event, file, fileList){
                console.log(event);
                console.log(file);
                console.log(fileList);
            }
        }      
    }
</script>
 
 
 
 
 
 

2、提交方式2--使用el的http-request自定义的action的提交

 
<el-upload ref="myupload"
                 name="file"
                 :action="nodeFile" accept="image/png,image/jpg,image/jpeg"
                            list-type="picture-card"
                           :limit=2
                           :auto-upload="false"
                           :on-exceed="handleExceed"
                           :before-upload="handleBeforeUpload"
                           :on-preview="handlePictureCardPreview"
                           :on-remove="handleRemove"
                           :on-success="handleAvatarSuccess"
                           :on-error = 'errorTest'
                           :on-progress = 'progress'
                           :http-request = "handlePost"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
 
 
<script>
    import axios from "axios";
    export default {
          data() {
            return {
                limitNum: 2,                            
                // nodeFile:'http://127.0.0.1:8080/xx-cms/file/uploadFile',
                nodeFile:'http://10.204.5.9:8070/xx-cms/file/uploadFile',
                image_url:''
            }
        },
        methods: {
            // 上传文件之前的钩子
            handleBeforeUpload(file) {
                console.log('handleBeforeUpload');
                if (!(file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/jpg, image/jpeg的图片'
                    })
                }
                let size = file.size / 1024 / 1024 / 10;
                if (size > 10) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于10M'
                    })
                }
            },
            // 文件超出个数限制时的钩子
            handleExceed(files, fileList) {
                this.$notify.warning({message: '只允许上传一张图片'})
            },
            // 文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            // 点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //自带的上传上传成功的回调方法
            handleAvatarSuccess(response, file, fileList) {
                console.log("handleAvatarSuccess-------");
                console.log(response);
                 //将成功之后的回调带过来
                 this.image_url = response.httpPath
                console.log(file);
                console.log(fileList);
            },
            uploadFile() {
                // 触发提交的操作
                console.log('触发-----------uploadFile----------------');
                this.$refs.myupload.submit();
            },
            errorTest(a,b,c){
                console.log(a);
                console.log(b);
                console.log(c);
            },
            progress(event, file, fileList){
                console.log(event);
                console.log(file);
                console.log(fileList);
            },
            handlePost(file) {
                console.log('handlePost----------------');
                console.log(file)
 
                const headers = {
                    // 添加请求头
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                const formData = new FormData();
                formData.append('file', file.file);
                axios.post('http://127.0.0.1:8080/xx-cms/file/uploadFile', formData, headers)
                .then(res => {
                    console.log("提交成功，下面打印参数");
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });
            }
        }      
    }
</script>
 

3、提交方式3--使用this.$refs去获取

 
<el-upload ref="myupload"
                 name="file"
                 :action="nodeFile" accept="image/png,image/jpg,image/jpeg"
                            list-type="picture-card"
                           :limit=2
                           :auto-upload="false"
                           :on-exceed="handleExceed"
                           :before-upload="handleBeforeUpload"
                           :on-preview="handlePictureCardPreview"
                           :on-remove="handleRemove"
                           :on-success="handleAvatarSuccess"
                           :on-error = 'errorTest'
                           :on-progress = 'progress'
                           :http-request = "handlePost"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
 
 
<script>
    import axios from "axios";
    export default {
          data() {
            return {
                limitNum: 2,                            
                // nodeFile:'http://127.0.0.1:8080/xx-cms/file/uploadFile',
                nodeFile:'http://10.204.5.9:8070/xx-cms/file/uploadFile',
                image_url:''
            }
        },
        methods: {
            // 上传文件之前的钩子
            handleBeforeUpload(file) {
                console.log('handleBeforeUpload');
                if (!(file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/jpg, image/jpeg的图片'
                    })
                }
                let size = file.size / 1024 / 1024 / 10;
                if (size > 10) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于10M'
                    })
                }
            },
            // 文件超出个数限制时的钩子
            handleExceed(files, fileList) {
                this.$notify.warning({message: '只允许上传一张图片'})
            },
            // 文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            // 点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //自带的上传上传成功的回调方法
            handleAvatarSuccess(response, file, fileList) {
                console.log("handleAvatarSuccess-------");
                console.log(response);
                 //将成功之后的回调带过来
                 this.image_url = response.httpPath
                console.log(file);
                console.log(fileList);
            },
            uploadFile() {
                // 触发提交的操作
                console.log('触发-----------uploadFile----------------');
                 //去掉submit，通过点击事件触发的
                //  this.$refs.myupload.submit();
                 console.log('uploadFile-------------');
                 console.log(this.$refs.myupload)
                 console.log(this.$refs.myupload.uploadFiles)
                 console.log(this.$refs.myupload.uploadFiles[0])
                 const headers = {
                    // 添加请求头
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                const formData = new FormData();
                formData.append('file', this.$refs.myupload.uploadFiles[0].raw);
                formData.append('file1', this.$refs.myupload.uploadFiles[1].raw);
                axios.post('http://127.0.0.1:8080/atpdc-cms/file/uploadFile', formData, headers)
                .then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });
 
 
 
            },
            errorTest(a,b,c){
                console.log(a);
                console.log(b);
                console.log(c);
            },
            progress(event, file, fileList){
                console.log(event);
                console.log(file);
                console.log(fileList);
            }
        }      
    }
</script>
 
于光yuguang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中使用axios上传图片等文件操作
10-19
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧
axios+Vue实现上传文件显示进度功能
10-17
主要介绍了axios+Vue上传文件显示进度效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
VUE 文件上传相关问题
zhoushujunlove的博客
07-28 1711
<el-upload :action="uploadActionUrl"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> 1 :action是执行上传动作的后台接口 参数 说明 类型 可选值 默认值 action 必选参数，上传的地址 string — — 如果不想使用默认的上传行为 可以使用...
fileList.slice(-3)的意思
滕青山博客
12-23 2574
handleChangeUpload(file, fileList) { this.fileList = fileList.slice(-3) }, fileList.slice(-3) 取最后3个文件
vue+axios+el-upload实现文件上传
最新发布
qq_33240556的博客
04-22 528
在 Vue.js 中结合 Axios 和 Element UI 的el-upload。
element上传图片组件，删除指定图片
w_w1314520的博客
09-08 1295
element上传图片组件，删除指定图片 <el-form-item label="处理图片：" :label-width="formLabelWidth"> <div>注:缩略图建议尺寸: 800*600(4:3)</div> <el-upload class="tupia" :action="impo
vue结合element ui 实现多个文件上传、并删除不符合条件的
qq_46372045的博客
09-14 5206
vue结合element ui 实现多个文件上传
element upload手动上传并灵活删除文件列表项
weixin_44738844的博客
07-11 5721
点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目。使用remove和change控制文件列表的增加和删除。手动上传，要关闭自动上传的功能。
vue使用axios上传文件(FormData)的方法
12-08
在此主要介绍 如何使用 formData 对象上传单文件和多...--文件上传表单--> <form> <input type="text" value="" v-model="name" placeholder="请输入用户名"> <input type="text" value="" v-mod
Vue axios 中提交表单数据(含上传文件)
08-30
本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下
优雅的删除数组里某个具体值的方法
weixin_42414634的博客
05-25 196
数组删除某个具体值
element-ui中的upload组件使用总结
落落Plus的博客
06-29 2万+
element-ui官网 使用upload组件： <el-upload class="upload-demo" ref="uploadFile" :on-change="beforeUpload" :action="uploadUrl" :headers="myHeader" :on-remove="handleRemove" :before...
el-upload 限制上传数量并提示、文件类型
weixin_43923808的博客
03-28 2751
el-uploadmultiple/>// 截取上传的文件名后缀.) + 1);if(){//进行上传成功的一些操作;}else{// 提醒只能上传的文件类型warn('只能上传.jpg、.txt类型的文件！');return;
Elementui中 文件缩略图 组件，选中图片如何删除
l1002670137的博客
09-03 2257
Elementui中 文件缩略图 组件，选中图片如何删除
elementUI自定义上传文件（前端后端超详细过程）
热门推荐
ILIKETANGBOHU的博客
10-15 2万+
注意：前台传送的是FormData数据，要拿到文件要使用@RequestParam(前端存放到formData的key)charset=utf-8”,提醒后台数据是FormData类型。这里要使用到FormData()对文件进行存储才能提交到后台。注意：使用FormData提交文件只能使用post请求。上传文件并与其他参数一同提交到后台(2.2 data中的属性。
vue文件删除handleRemove调用splice（index,1）出现的问题
xiaoxuera的博客
04-22 3895
handleRemove调用splice(index,1)出现的问题
element-ui实现多文件上传删除
一个超爱喝可乐的web前端攻城狮
05-18 2097
element-ui实现多文件上传删除 1,使用 element-ui 的 Upload 上传组件 直接贴代码了 html <div class="addFile"> <el-upload action multiple :on-remove="handleRemove" //删除 :http-request="handleChange" //上传接口函数 :file-list="handleFileList" //上
vue upload 上传文件之删除文件
楠姐的博客
07-16 6078
在做图片上传时，用Element UI 组件库 upload组件，图片上传时通过文档流的形式，例如下面代码中的action的地址，需要提前协商好，但是Vue官网对删除只介绍了其中的一些并没有实现图片的删除功能， handleRemove(file, fileList) { console.log(file, fileList); }, 那么接下来看看在项目中怎么实现的吧 首先自己手写了一个删除的方法，循环遍历外边的一层 当点击 ‘X’时，获取当前文件的图片路径，和之前的图片List进行比.
基于elementUI 的上传、下载文件功能
m0_58222109的博客
10-08 871
window.open("文件地址")
axios + vue3 + vite获取文件上传进度
10-31
在axios中获取文件上传进度需要使用axios的onUploadProgress方法。在Vue3中，可以使用Composition API来实现。以下是一个使用axios + vue3 + vite获取文件上传进度的示例代码： 引用中的request.ts文件中的代码： ```typescript import axios, { AxiosRequestConfig } from 'axios' const request = axios.create({ baseURL: 'http://localhost:1101', timeout: 5000 }) // 请求拦截器 request.interceptors.request.use(function (config) { // 一般在这里设置token // console.log('config', config) return config }, function (err) { return Promise.reject(err) }) // 响应拦截器 request.interceptors.response.use(function (config) { return config }, function (err) { return Promise.reject(err) }) // 返回数据data export default <T = any>(config: AxiosRequestConfig) => { return request(config).then(res => { return res.data.data as T // 根据你自己的情况 }) } ``` 在Vue3组件中，可以使用Composition API来实现文件上传进度的获取。以下是一个示例代码： ```vue <template> <div> <input type="file" @change="uploadFile" /> <div v-if="progress !== null"> {{ progress }}% </div> </div> </template> <script> import { ref } from 'vue' import uploadFileApi from '@/api/uploadFile' export default { setup() { const progress = ref<number | null>(null) const uploadFile = async (event: Event) => { const file = (event.target as HTMLInputElement).files?.[0] if (!file) { return } const formData = new FormData() formData.append('file', file) await uploadFileApi({ url: '/upload', method: 'post', data: formData, onUploadProgress: (progressEvent) => { progress.value = Math.round((progressEvent.loaded / progressEvent.total) * 100) } }) progress.value = null } return { progress, uploadFile } } } </script> ``` 在上面的代码中，我们使用了ref来定义一个响应式的progress变量，用于显示上传进度。在uploadFile方法中，我们使用FormData来创建一个包含文件的表单数据，并将其作为data参数传递给uploadFileApi方法。在uploadFileApi方法中，我们使用onUploadProgress方法来获取上传进度，并将其赋值给progress变量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值