Element ui Upload 上传图片到七牛云-Toy模板网

这篇具有很好参考价值的文章主要介绍了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
}

文章来源地址https://www.toymoban.com/news/detail-621192.html

到了这里，关于Element ui Upload 上传图片到七牛云的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！