精华内容
下载资源
问答
  • ant design vue文件上传
    2022-08-04 09:50:41

    前言

    开发环境为vue3.x+AntDesign,基于AntDesign中的upload组件封装,因为有时文件上传不仅仅需要图片,类似本次工作中遇到上传的文件有可能是图片、world、pdf等;

    实现思路:将upload再次封装,根据文件的type、name后缀判断当前文件的类型,图片、视频支持预览,其他类型文件仅支持下载

    实际开发中文件上传接口可能需要传token以及其他的参数,所以可以通过对应参数传参。


    一、文件上传

    主要代码如下:

    <template>
      <div class="lemon-upload-layout">
        <a-upload
          :multiple="props.multipleType"
          :maxCount="props.maxLength"
          v-model:file-list="filesList"
          :accept="props.isTypeAll ? '' : props.acceptType"
          list-type="picture-card"
          :name="uploadName"
          :action="props.FileUploadUrl"
          :headers="props.headers"
          :data="props.uplaodData"
          :openFileDialogOnClick="true"
      
    更多相关内容
  • 基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于ant design vue 实现的一套后台管理框架。主要使用vue3 + vuex + vue-router + ts 基于...
  • 采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-upload name="file" style="float: left;" @change="uploadFile" :fileList="fileList" :showUploadList="false" :customRequest=...

    采用默认上传文件样式如下:

    主要代码如下,可参照官方示例

           <a-upload
              name="file"
              style="float: left;"
              @change="uploadFile"
              :fileList="fileList"
              :showUploadList="false"
              :customRequest="customRequest">
              <a-button style="margin: 2px 2px;" icon="upload"></a-button>
            </a-upload>

    想要固定button位置和上传文件列表展示位置, 思路为引用两个upload组件,一个带上传button,只负责上传文件操作,不显示文件列表;将文件列表数据赋值给另一个组件,另一个组件负责展示文件列表。两个组件分别置于两个div中,因此可以通过控制div样式来调整位置。关键代码如下:

    <!-- 上传文件-->
     <div class="list-button">
            <a-upload
              name="file"
              style="float: left;"
              @change="uploadFile"
              :fileList="fileList"
              :showUploadList="false"    <!--设置该组件不显示文件列表-->
              :customRequest="customRequest">
              <a-button style="margin: 2px 2px;" icon="upload"></a-button>
            </a-upload>
      </div>
    <!-- 展示文件列表-->
      <div class="show-file-name">
            <a-upload
              style="float: left;width:100%"
              :fileList="showFileList"    <!--设置该组件文件列表-->
            ></a-upload>
        </div>
    ...
    
    export default{
        data(){
            return{
                 fileList:[],
                 showFileList:[]
            }
        },
         methods:{
            uploadFile(info){
                    // console.log("info:", info);
                    let { fileList } = info;
                    const status = info.file.status;
                    if (status !== 'uploading') {
                        console.log("uploading...",info.file, info.fileList);
                    }
                    if (status === 'done') {
                        this.$message.success(`${info.file.name} file uploaded successfully`);
                    } else if (status === 'error') {
                        this.$message.error(`${info.file.name} file upload failed.`);
                    }
                    this.fileList = [...fileList].slice(-1);    //只保留最新上传的一个文件
                    this.showFileList = this.fileList;  //文件列表赋值
                },
        }
    }
    
    
    ...css...

    效果如下:

    唉,之前也是调了老半天

    展开全文
  • 本文档主要是本人对VueAnt Design Vue学习后总结的经验,方便其它同事能够通过该文档对该技术有所了解 , 同时方便产品团队对前后分离的技术有增加知识储备。 目录如下 2.Vue经验分享 2.1 Vue介绍 2.2 Vue的MVVM...
  • Ant Design Vue:一个基于Ant DesignVue的企业级UI组件库
  • Ant Design Vue如何上传文件、图片,复制即用

    千次阅读 多人点赞 2021-11-22 16:34:49
    上传文件之前的钩子,参数为上传文件,若返回false则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入File或Blob对象则上传 resolve 传入对象)。...

    文档介绍的关键参数:

    beforeUpload上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 File 或 Blob 对象则上传 resolve 传入对象)。注意:IE9 不支持该方法(file, fileList) => boolean | Promise

    上传的组件:

    <a-upload-dragger
              v-model:fileList="fileList"  //双向绑定的变量是文件数组
              name="file"                 // 发到后台的文件参数名
              :before-upload="beforeUpload"   //上传文件之前的钩子,参数为上传的文件
              @change="handleChange"  //change	上传文件改变时的状态
            >
              <p class="ant-upload-text">上传文件</p>
            </a-upload-dragger>

    上传的逻辑 

    import axios from "axios";
    //TS
    interface FileItem {
      uid: string;
      name?: string;
      status?: string;
      response?: string;
      url?: string;
    } 
    
    //拦截提交事件,将文件数据填入List
        const fileList = ref<FileItem[]>([]);
        const beforeUpload = (file: FileItem) => {
          fileList.value = [...fileList.value, file];
          formState.name = fileList.value[0].name;
          return false;
        };
    
        //确认提交按钮回调,如果不要这个按钮可以直接在beforUpload里面调用
        const onSubmit = (e) => {
          const data = new FormData();
          // 上传多个文件需要循环
          fileList.value.forEach((file: FileItem) => {
            file.status = "uploading";
            data.append("file", file.originFileObj);
            data.append("type", "FILE");
          });
          // 添加token
          // data.append("token", String(token));
    
          // 新建一个修改头部的axios,因为我其他的数据是通过URLSearchParams提交的,识别的头不同
          const upload_ax = axios.create({
            baseURL: "/api",  //在vite.config.js配置的跨域
            withCredentials: true,   //上传请求时是否携带 cookie
            headers: {
              "Content-Type": "multipart/form-data",
            },
          });
    
          //用新的对象提交
          upload_ax.post('这里写上传链接的地址', data).then((response) => {
            // 处理数据完成情况
            console.log(response.data, "response");
          });
        };

    上面的data解析完是表单数据格式 

    FormData()这个函数不懂的点击蓝色字体查看用法

    最后 

    如果对您有帮助,希望能给个👍评论/收藏/三连!

    博主为人老实,无偿解答问题哦❤

    CSDN大前端社区邀请您加入:CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云

     

    展开全文
  • ant design vue.docx

    2021-05-04 18:07:03
    ant design vue
  • Ant Design vue自定义文件上传

    千次阅读 2021-07-31 16:39:38
    1、查看vue antdesign文档 https://vue.ant.design/components/upload-cn/ 2、使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 3、定义customRequest,之前定义...

    实际项目中,上传文件时实际可能需要传输一个token。

    方法一:

    1、查看vue antdesign文档
    https://vue.ant.design/components/upload-cn/

    2、使用customRequest

    customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 

    3、定义customRequest,之前定义action行为会被覆盖,可以注释掉

    4、customRequest代码如下

    复制代码

    customRequest (data) {
          const formData = new FormData()
          formData.append('file', data.file)
          formData.append('token', 'aiufpaidfupipiu')//随便写一个token示例
          this.saveFile(formData)
        },
        saveFile (formData) {
          this.form.validateFields((err, values) => {
          if (!err) {
            let that = this
            this.axios(
            {
              method: 'post',
              url: 'http://localhost:4785/api/values/PostSingle',
              data: formData
            })
            .then((response) => {
              console.log(response)
            })
            .catch(function (error) {
              console.log(error)
            })
            }
          })
        },

    复制代码

    5、这样当文件变化时,就会附带token并上传到服务器,NetWork观察提交数据如下

     6、有同学反映无法接受数据,现给一个后端代码demo(.netcore)参考,新建一个.netcore webapi工程,修改Post代码如下。

    7、D盘下文件保存成功如下

     方法二:

    最近发现有一种官方例子更符合习惯思维的方法,看这个例子

    复制代码

    <template>
      <div class="clearfix">
        <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
          <a-button> <a-icon type="upload" /> Select File </a-button>
        </a-upload>
        <a-button
          type="primary"
          @click="handleUpload"
          :disabled="fileList.length === 0"
          :loading="uploading"
          style="margin-top: 16px"
        >
          {{ uploading ? 'Uploading' : 'Start Upload' }}
        </a-button>
      </div>
    </template>
    <script>
    import reqwest from 'reqwest';
    export default {
      data() {
        return {
          fileList: [],
          uploading: false,
        };
      },
      methods: {
        handleRemove(file) {
          const index = this.fileList.indexOf(file);
          const newFileList = this.fileList.slice();
          newFileList.splice(index, 1);
          this.fileList = newFileList;
        },
        beforeUpload(file) {
          this.fileList = [...this.fileList, file];
          return false;
        },
        handleUpload() {
          const { fileList } = this;
          const formData = new FormData();
          fileList.forEach(file => {
            formData.append('files[]', file);//后面再加上token
          });
          this.uploading = true;
    
          // You can use any AJAX library you like
          request({
            url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
            method: 'post',
            processData: false,
            data: formData,
            success: () => {
              this.fileList = [];
              this.uploading = false;
              this.$message.success('upload successfully.');
            },
            error: () => {
              this.uploading = false;
              this.$message.error('upload failed.');
            },
          });
        },
      },
    };
    </script>

    复制代码

    展开全文
  • Ant design vue 的组件禁用属性 disabled
  • ant design of vue文件上传 action设置上传的地址 headers设置上传的请求头部 fileList接收已经上传文件列表(受控)可以控制文件数量 事件change记录上传文件改变时的状态,当status为‘done’时将文件列表的地址...
  • ant design vue 锚点使用 Anchor 踩坑记录
  • 实际开发中,ant design vue上传组件,如何配合后端API使用
  • 蚂蚁设计专业Vue模板根据改造后的开箱即用的后台管理系统模板,优化了很多内容,更轻量,更简洁,可以在此模板上快速,便捷地去建造自己的后台项目。预览:|优化:项目结构和文件夹命名,项目结构更加合理优化:只...
  • ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
  • Ant Design vue v1.7.2 离线文档
  • Vue+Ant Design of Vue上传文件,并限制上传文件数及限制其类型
  • 按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
  • ant-design-vue3-admin 一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板,支持响应式布局,在 PC、平板和手机上均可使用。 最新的技术栈 统一的技术规范 权限方案(路由,菜单,操作...
  • ant-design-vue.zip

    2019-12-13 17:00:43
    使用ant-design-vue搭建的后台管理系统,可使用jeecgboot的后台,这个是最基本的框架,只有系统管理一个模块,方便后续二次开发
  • 前言 本文针对vue新手用户提供一个快速使用示例,大佬请忽略。 ...查看项目中使用的Ant Design Vue版本,可查看package.json(初次接手前端的后端研发同学,可能不知道这个文件,请查阅相关资料)
  • 可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
  • ant design vue 的 description组件中 label 默认样式的更改
  • Vue3 Ant-Design 文件上传
  • Ant Design Vue 上传文件

    2022-06-10 08:59:52
    使用SpringBoot+Vue+Antd 编写上传文件功能
  • 前端上传和导入excel文件
  • vue使用ant design vue(upload)文件上传

    万次阅读 2020-10-15 10:30:19
    使用remove的时候是一个函数,刚开始我用的@remove后来用上:remove才可以,因为接收的是一个(点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject ...
  • English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案,作为Vue样板。 基于 预览: : 主页: : 文档: : 变更日志: : 常见问题解答: : ...git clone https://github.com/vueComponent/ant-
  • 后台返回菜单无限层级展示
  • 开发文档: : Ant Design Vue Pro文档: : 初步: : 服务器提供: 预览账号超级管理员admin, 1234前端部署安装yarn预览yarn serve打包打包后的文件位于/dist/ npm run build刷新404问题location / { try_files $uri ...
  • English | 蚂蚁设计专业Vue 适用于企业应用程序的即用型UI解决方案,作为Vue样板。...cd ant-design-pro-vue 安装依赖项 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,163
精华内容 9,265
关键字:

ant design vue文件上传