同事使用的WebUploader而我用的ElementUpload......

·  阅读 508
同事使用的WebUploader而我用的ElementUpload......

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

同事使用的WebUploader进行的附件上传,而我却用了Element上传... 在前端发展到今天,我感觉使用WebUploader的人是越来越少了,现在基本最流行的也就是Element、vant、Ant-design、等等优秀的UI框架...

今天领导要求,给老项目增加几个功能,原本以为也就几个小时完成的活,没想到搞了半天才完成。主要原因就是因为 接口是复用的,同事之前在做的功能页面是用的WebUploader来完成的附件附件上传接口是按照表单来写的,而我新写的是用的Element...

发现问题所在:

本来我认为是没问题的,可是当我调起接口时,我傻了...

QQ图片20211119143237.png 出错了,我靠。对于我们前端来说,不要紧先看看是为啥出错,错误很明显 Code 500.

相信大家也都清楚这个错误,这里就不在多聊,我刚开始没有太在意,我就想着 可能是我这边的错误,我就进行了排查。后来发现和我同事之前调用这个接口相比,我的这次调用有些不同,具体我们来看一下:

这是我调用的:

微信图片_20211119195932.png

这是我同事调用的:

微信图片_20211119195918.png

可以看明显的看出,一个是JSON 一个是表格。 这肯定是走不通的。

结局问题过程:

于是,我刚开始的第一个想法是进行转换试一试。 我找到了在Axios里面去设置headers

var instance = axios.create({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
复制代码

结果变成了这样:

QQ图片20211119143921.png

看着是变成了 Form Dta 其实,还是走不通,还是不行! 因为在Content-type: Response headers里还是application/json;charset=UTF-8

很明显,这样转换行不通!于是我开始了产生转换插件,打算把附件上传这一部分使用WebUploader来上传,这样就和我同事数据请求一致了,肯定也可以走通。结果我百度了一下,Vue中使用WebUploader,我老天,看着配置有点多,可能我比较懒,于是我放弃了。

成功解决:

过了一会,我去Element官网去看文档,结果发现人家是支持发送Form Dta的。 于是我改成这样:

QQ图片20211119144731.png

就成功跑通了

QQ图片20211119144918.png

总的而言:就是自己太粗心,刚开始没有仔细观察接口的请求标准和Element的官方文档,可能感觉比较简单,就自我大意了,最后还是花了一些时间去解决。

最后介绍一下WebUploader:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主的插件。

WebUploader官方网站

这里涉及的知识点也就是Formdata和json的不同...这里我没有重点来介绍,如果感兴趣的伙伴可以自行跳转:

FormData和Json的不同支撑

但是在走之前麻烦点个赞~ 谢谢您的阅读!!!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改