前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vant上传文件到后端

vant上传文件到后端

作者头像
用户6362579
发布2020-04-23 15:35:15
3.2K0
发布2020-04-23 15:35:15
举报
文章被收录于专栏:小神仙小神仙

最近在做手机版页面,采用的vant框架,这个上传控件和以前用iview、element有点不一样,iview、element都是直接提供后端接口文件会自动发送到后端,vant需要自己负责发送文件到后端,对于我这种面向百度编程人员还是有点难度。特意记一下,能帮到其他面向百度编程人员


代码

很简单,基本是使用文件构建FormData参数,如下:

html代码

代码语言:javascript
复制
<van-uploader
:after-read="afterRead"
:before-delete="beforeDelete"
v-model="fileList"
/>

ts代码

代码语言:javascript
复制
  fileList=[];
  /**文件上传 */
  afterRead(file) {
    // 此时可以自行将文件上传至服务器
    // console.log(file);
    let that = this;
    let id = 1;
    if (!/image\/[a-zA-z]+/.test(file.file.type)) {
      this.$toast("请上传图片");
      return false;
    }

    let params = new FormData();
    params.append("file", file.file);
    params.append("ID", id);
    let config = {
      headers: {
        //添加请求头
        "Content-Type": "multipart/form-data"
      }
    };
    return new Promise((resolve, reject) => {
        //我的后端还是asp的
        //需要其他后端的可以看我以前的博文去复制
      Ajax.post("/***/FileUpload.ashx", params, config)
        .then(res => {
          if (res.status === 200) {
            //可以直接再file上附加属性,这样再删除的时候就可以作为标识从服务器删除数据
            file.path = res.data[0].Path;
            //URL是一个后端地址(前后端不在一个地址)常量
            file.url = URL + res.data[0].Path;
            console.log(that.fileList);
            resolve();
          } else reject();
        })
        .catch(() => {
          reject();
        });
    });
  }
  beforeDelete(file) {
    console.log(file);
    return new Promise((resolve, reject) => {
        //我的后端删除文件直接使用文件地址,你们的根据自己的修改
      Ajax.post(
        "/***/DeleteFile.ashx?path=" +
          escape(file.path) +
          "&ts=" +
          new Date().getTime()
      )
        .then(res => {
          if (res.status === 200) resolve();
          else reject();
        })
        .catch(() => {
          reject();
        });
    });
  }

这里没有写从后端获取文件列表,你需要自己获取,文件列表只需要包含url或者content(文件的base64编码)两个属性就可以正常绑定列表,上传的时候通常是content,从服务器返回的我用的url,主要是读取文件再转换base64我不会,还要再百度一次,太麻烦了。


本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码
    • html代码
      • ts代码
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档