Element ui 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
}

 

你可能感兴趣的:(前端,vue.js)