Element ui Upload 上传图片到七牛云

<el-upload
						class="avatar-uploader"
						action="https://upload-z1.qiniup.com"
						:on-success="uploadSuccess"
						v-model="bh"
						:data="qnToken"
						:before-upload="beforeUpload"
						accept=".jpg,.jpeg,.png,.JPG,.JPEG"
						:show-file-list="false"
					>
						<img v-if="formList.imageUrl" :src="formList.imageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>

action里填写的是七牛云的服务器地址（根据自己申请的区域填，如下图，我这边用的是华北地区)

注意：开发环境可以用http但是上线时需改为https请求，不然请求失败，所以建议都用https

七牛的一张存储区域表

存储区域    区域代码    客户端上传地址    服务端上传地址
华东    ECN    http(s)://upload.qiniup.com    http(s)://up.qiniup.com
华北    NCN    http(s)://upload-z1.qiniup.com    http(s)://up-z1.qiniup.com
华南    SCN    http(s)://upload-z2.qiniup.com    http(s)://up-z2.qiniup.com
北美    NA    http(s)://upload-na0.qiniup.com    http(s)://up-na0.qiniup.com
东南亚    　    http(s)://upload-as0.qiniup.com    http(s)://up-as0.qiniup.com

const beforeUpload=  (file:any)=>{
      // 从后端获取到的token的值
       let {data}:any = await getQnToken(params);
	   const timestamp = new Date().getTime();//因为它不能上传文件名相同的图片，所以把文件名加了时间戳
	 qnToken.value.token = data.token;
	qnToken.value.key='image/'+timestamp+file.name//这里拼上了Image文件夹，可以根据自己的七牛云设置的文件夹自定义，如果不拼则直接上传到了七牛云根文件夹，很混乱。
}
const uploadSuccess=async (res:any, files:any)=>{
	  let img=`https://zymsstiaojie.com/qiniu/${res.key}`//拼上自己的七牛云服务器域名
	  formList.value.imageUrl=img
}