Element-Plus上传文件到七牛云
## 直接看代码 ### 上传组件 ```html <el-upload action="https
渲染中...
## 直接看代码
### 上传组件
```html
<el-upload
action="https://up-z0.qiniup.com"
:data="fileData"
v-model="fileList"
class="upload-demo"
drag
:before-upload="selectNewFile"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处,或 <em>点击</em> 开始上传文件
</div>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
```
<!-- more -->
### ts代码
```ts
import { UploadFilled } from "@element-plus/icons-vue";
import type { UploadUserFile, UploadRawFile } from "element-plus";
const fileData = ref<any>({});
const fileList = ref<UploadUserFile[]>([]);
const selectNewFile = async (rawFile: UploadRawFile) => {
console.log(rawFile);
// 调用自己的后端,获取七牛云token
const res = await doApi.get<{ token: string }>("file/getUploadToken");
console.log(res);
if (res.c == 200) {
// 封装七牛云特殊字段参数
fileData.value = {
token: res.d?.token,
};
console.log(fileData.value);
return true;
}
return false;
};
```
### 易错点
`fileData` 是封装七牛云特定参数使用的变量,但注意,改变其值时,要使用 `.value` 完全重置其内容,否则调用七牛云接口时,使用的时默认变量值,很怪很奇葩,垃圾 `Element` !。
END
评论
登录后查看和发表评论
前往登录