该视频仅会员有权观看
立即开通课程「Vue.js前端应用开发实践」权限。
- 用户可以在app组件中通过输入内容和按回车来创建新内容并上传文件。
- 在app组件内定义一个名为
create file的新方法，该方法接收一个文件对象(file)和一个postId参数，用于执行上传操作。
- 这个方法通过创建一个名称为
form data的表单数据并使用multi part form data格式进行编码。
- 使用
append方法添加名为file的字段，其值为选定的文件对象。
- 使用
try catch结构发起上传文件请求，如果出错，在组件中设置错误信息。
- 请求发送后，在
try语句块里等待响应(response)，利用post方法发送给服务器/files接口，并传递postId和表单数据。
- 请求需要带上由组件token构成的
authorization头部用于身份验证。
- 请求成功后清除组件中的文件信息，以及重置文件输入字段的值。
- 使用
create post方法创建新内容时，如果file变量有值，调用create file方法，并传递选定的文件和内容的ID。
- 上传并处理文件完成后，在控制台输出响应数据，并显示服务端返回的新文件数据ID。
- 使用这个ID，用户可以在新标签页访问上传的原始图像，地址是
http://localhost:3000/files/[file_id]/serve，还可以通过size参数设置图片尺寸为large、medium或thumbnail。
