VUE UPLOAD 通过ACTION返回上传结果

最新推荐文章于 2024-09-09 11:08:24 发布

krystal_me

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量2.8k

点赞数 3

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/daniella05/article/details/105370350

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过Upload 的action方法返回不了结果，可以通过on-success方法中获取返回结果

</Upload>

~~--------------------------------------------------------------------------------------------------------------~~

computed: {

uploadUrl() {

return baseUrl + "/ImportExcel/";

}

//file为ImportExcel方法返回的结果

onSuccess(file){

if(file.code=="1")

{

this.$Message.error("导入失败:" + file.msg);

return;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

krystal_me

关注关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VUE UPLOAD 通过ACTION返回上传结果操作

10-14

主要介绍了VUE UPLOAD 通过ACTION返回上传结果操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue+el_upload实现文件上传的方式.doc

02-01

"Vue+el_upload实现文件上传的方式" 在Web开发中，文件上传是一个非常常见的需求。 Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的...

参与评论您还未登录，请先登录后发表或查看评论

Vue上传图片并回显

米拉

09-22

1839

HMTL部分: <template> <div class="tc"> <span class="upLoadImgBt">点击上传 <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage"> <img :src="image" class="upLoadImg"> </span> </div> &

ant-design Upload上传组件使用 action上传

m0_73481765的博客

08-30

2251

在 ant-design 的 Upload 组件中，可以使用 action 属性来指定上传文件的接口地址。当用户选择文件并点击上传按钮时，组件会将文件发送到该接口进行处理。注意：action 属性需要指定一个有效的接口地址，用于接收上传的文件。同时，你还可以使用 method 属性来指定请求的方法，默认为 post 方法。这样当用户选择文件并点击上传按钮时，该方法会被调用，并打印出要上传的文件对象，或删除存储数组中的对应路径，一个基本图片上传就完成了。

Ant Design 框架upload组件上传之前发请求根据返回结果判断是否上传

zjq_1234的博客

01-09

2557

第一步：在upload使用的组件中定义空数组（在所有的filelist赋值中只能为数组，不能为对象）第二步：配置props里面的属性 const props = { name: 'file', beforeUpload: this.beforeUpload, fileList: this.state.fileList.slice(-1), o...

vue上传文件用：action调用接口如何获得后端返回值

hd2019jsz的博客

10-31

2255

仅限用于vue控件调用后台接口传值问题

Form表单上传文件，上传成功后获取返回数据

热门推荐

蒲厷渶と戀的博客

01-11

3万+

项目开发过程中，涉及到了图片上传和文件上传。在做"图片上传"和"文件上传"的功能时，我在项目中用的是form表单，简单示例如下：一、图片或文件上传 HTML代码如下：在页面渲染效果如下：选择文件，点击提交，执行结果如下：由上面执行结果的第一张图可知，Form表单中的action已被执行；由上面执行结果的第二张图可知，所选文件及相关信息已被上传。

vue如何优雅的上传文件

weixin_45693257的博客

08-18

2万+

vue如何优雅的上传文件上传文件的方式新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入上传文件的方式下面是我使用过得两种提交方法，详细说一下哈 1.使用表单提交文件 2.使用Elementui封装的组件提交文件新的改变

【Antd Design Upload BUG】 antd Upload 上传时只有Uploading状态，无法获取服务器返回的数据

qq_44933075的博客

08-22

5802

最近在对接antd Upload时候想获取服务器返回的数据图片，发现无法获取返回值，点击@chang事件的时候只触发Uploading 一个状态，无法拿到服务器返回的数据

vue + elemetui — upload解决跨域、实现图片上传

枫

04-25

8192

最近做Vue项目，需要用到图片上传的功能，因为是PC端后台项目，故而采用了element-ui组件库里的upload上传的组件。本文主要解决上传时的跨域问题。 action属性便是上传的地址，需要进行跨域。话...

vue中el-upload上传图片到七牛的示例代码

12-29

一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el-upload class=upload-demo :file-list=...

vue结合el-upload实现腾讯云视频上传功能

11-20

在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...

ant上传图片获取返回值中的图片路径自用

aminwangaa的博客

12-27

5444

import React, { PureComponent } from 'react'; //这里connect如果请求接口必须要！ import { connect } from 'dva'; import {getAdList} from '../../axios'; import { Upload, Icon, message } from 'antd'; //import styl...

图片上传服务器获取返回上传的地址

qq_47249564的博客

11-25

1442

public static Map<String,Object> UpIOFile(byte[] bbyte,String type){ String uploadUrl = "上传到的地址"; String end = "\r\n"; String twoHyphens = "--"; String boundary = "---------------------------823928434"; try { URL url = new URL(...

avue强大的upload表单项内置方法的使用，用这个可以配合$DialogForm.show()弹框完美使用上传控件

经验之谈，不做搬运工

03-23

1409

/如果你想修改file文件,由于上传的file是只读文件，必须复制新的file才可以修改名字，完后赋值到done函数里,如果不修改的话直接写done()即可。"弹窗表单（字段联动，初始化约束）"

Element 组件 el-upload 获取上传失败时的返回信息

weixin_45749030的博客

04-24

4722

在处理 el-upload 上传组件在上传失败时可以使用 on-error钩子函数来显示后端返回的错误信息 //html 区域 <el-upload class="upload-demo" ref="upload" :headers="headers" :action="excelUploadApi" :on-change="handleChange" :on-error="handleError" :show-file-list="false"> <el-button slot="t

【Antd Design Upload】 antd Upload 上传时只有Uploading状态，无法获取返回的数据

Boboy

11-23

3702

ntd Upload 上传时只有Uploading状态，无法获取服务器返回的数据

vue中图片上传及回显

weixin_41696089的博客

10-28

6411

在vue中图片上传到服务器下指定路径，并实现根据图片路径调取后台接口返回图片流在vue页面展示图片。

vue使用自定义指令实现一键复制

最新发布

Zing_ing的博客

09-09

611

/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});

vue3<el-upload action

09-29

引用提供了关于Vue3中使用el-upload组件的一些代码示例，包括获取七牛token、上传图片到七牛、获取返回图片路径以及设置el-upload的属性等。根据引用中的代码示例，你可以按照这个思路进行操作。首先，从后台获取七牛的token，可以使用相关的接口或方法。然后，设置el-upload组件的属性，包括file-list、action、before-upload和data等。其中，file-list用于设置上传文件列表，action是上传文件的地址，before-upload用于上传之前的校验，data是上传文件时附加的数据。在Vue3中，你可以使用如下代码实现el-upload组件的相关功能： ``` <template> <el-row> <el-col :span="12"> <el-form-item label="图片:"> <el-upload class="avatar-uploader" :on-change="getFile" :show-file-list="false" :action="domain" :auto-upload="false" :data="form"> <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> </el-col> </el-row> </template> <script> export default { data() { return { fileList2: [], // 上传文件列表 domain: '', // 上传文件的地址 form: {} // 上传文件时附加的数据 }; }, methods: { getFile(file) { // 上传文件的方法 // 处理上传成功后的回显路径 }, beforeAvatarUpload(file) { // 上传文件之前的校验 } }, mounted() { // 获取七牛token的方法 // 设置this.domain为上传文件的地址 } }; </script> ``` 以上代码是一个基本的el-upload组件的使用示例，你可以根据自己的需求进行修改和拓展。