arco.design中的上传文件，不仅要在本地展示，还要上传到OSS，还要美观！

arco.design中的上传文件，不仅要在本地展示，还要上传到OSS，还要美观！

我选择了 => arco.design/vue/compone… 中的用户上传头像功能 它能本地展示效果，很有美感，但是不好拿到他的文件信息，我试了好一段时间，才拿到文件信息，传到后台，后台上传到阿里云 上代码 => 愚见仅供参考

vue3的写法   react同样适用 去UI库中切换成react模式，拷贝下代码就好了 主要是为了拿文件信息

template 代码

    <a-upload
        action="/"
        :fileList="file ? [file] : []"
        :show-file-list="false"
        @change="onChange"
        >
        <template #upload-button>
        <div 
            :class="`arco-upload-list-item${file && file.status === 'error' ? ' 
            arco-upload-list-item-error' : ''}`">                           
            <div v-if="file && file.url" 
                 class="arco-upload-list-picture custom-upload-avatar">
                    <img :src="file.url" />
                    <div class="arco-upload-list-picture-mask">
                        <IconEdit />
                    </div>
                    <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    />
            </div>
                <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                        <IconPlus />
                    </div>
                </div>
            </div>
        </template>
    </a-upload>

script 代码 => 通过UI库提供的@change监听事件 第一个参数下标0的file属性 (_[0].file) 拿到文件信息（拿到文件信息，那就右手就行了）

const onChange = async (_: any, currentFile: any) => {
    const formData = new FormData()
    formData.append('file', _[0].file)
    let data = await axios.post('/api/upload', formData)
    console.log(data)
    file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
    };
};

后端代码是用egg去搭建的

const Controller = require('egg').Controller
const OSS = require('ali-oss')
let client = new OSS ({
    region: 'oss-cn-******',
    bucket: '*********',
    accessKeyId: '**********',
    accessKeySecret: '************',
})
class UploadController extends Controller {
    async upload() {
        const {ctx, app} = this
        try{
            const file = ctx.request.files[0]
            const result = await client.put(`one/` + Date.now() + '-' + file.filename, file.filepath)
            //console.log(result)
            ctx.body = {code: 200, msg: '上传成功', url: result.url}
        }catch(err) {
            //console.log(err)
            ctx.body = {code: 400, msg: '上传失败'}
        }
    }
}