vue3简单图片上传 -- 使用el-upload组件

        实现图片的简单上传，页面显示效果如图所示。当鼠标悬停在图片上传区域后，上传框会高亮显示（如图变成蓝色虚线框），点击后选择文件，点击确认实现图片的上传。

上传图片页面

        下面是element-plus上传组件链接：
Upload 上传 | Element Plusa Vue 3 based component library for designers and developershttp://element-plus.org/zh-CN/component/upload.html

        文档比较简单，利用 el-upload 组件功能实现简单的图片上传，涉及到的代码如下图：

HTML代码示例

         需要注意的是两个回调函数的使用：第一个是 :before-upload="beforeAvatarUpload" ，另一个是 :on-success="handleAvatarSuccess" ，

        :before-upload 是图片上传之前触发的回调函数，既然是上传之前，则需要进行一些判断然后上传：比如文件类型的限制以及文件大小的限制。里面有一个参数 rawFile ，参数信息和  :on-success 中第二个参数 uploadFile 中的文件信息raw 属性一致。包含文件名name，文件类型type，文件大小size等。

        :on-success 是图片上传成功的回调，有两个参数，第一个是 response，是组件中action属性（ action="/api/admin/product/fileUpload"）所对应的上传接口返回的信息，里面有一个重要的信息：data。将data里面的地址可赋值到参数 url 中实现上传。

:on-success="handleAvatarSuccess"

response

        第二个参数是 uploadFile，里面包含该图片文件的相关信息：文件名name，文件信息raw，大小size，uid，以及response。

uploadFile