文章目录
文件上传的前端组件
- 文件上传的前端组件
- 文件上传的品牌页面
将课程配套的资料, 代码文件夹中有文件上传组件的代码如下图 
复制到前端项目的 components文件夹下 
打开文件 , 可以看到 主要是用的ElementUI的el-upload标签 
复制阿里云控制台中, 外网访问的地址 
复制到如下的action中 
确认获取签名的请求是否正确 
在品牌管理的brand-add-or-update.vue文件中, 进行如下的修改
- 引入文件上传的组件, 如下图
import SingleUpload from "@/components/upload/singleUpload";components: {SingleUpload},
- 在页面上使用组件, 并且用v-model 进行绑定
后端服务将上一节中的返回的签名用R对象返回 
因为在解析返回的签名数据时, 用的data 
后台启动如下的服务 . 前端使用npm run dev进行启动 
在页面上点击上传文件. 就可以看到第一个获取签名的请求是成功的, 第二个把文件上传给阿里云oss 是失败的. 
主要的原因是控制台报错如下 , 涉及到了跨域 , 需要在阿里云控制台中设置跨域访问
Access to XMLHttpRequest at 'http://..........aliyuncs.com/' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在阿里云的基础设置中有跨域访问 
创建如下的规则 , 代表允许所有的请求跨域访问 
配置完成跨域后, 再次上传, 可以看到上传成功了. 
但是上传的文件夹多了一个斜杠 
可以把前端中, 此处的斜杠去除 
修改完成后, 再次上传, 可以看到文件上传后, 没有在斜杠文件夹下 了
通过浏览器的vue 插件, 可以看到图片的访问地址 
可以看到上传给阿里云oss的请求, 是带着签名和文件去上传的. 
