iview upload组件上传图片到七牛

发布于 09-06 19:27 字数 829 浏览 45 评论 0

如何用vue2的upload组件上传图片到七牛?

 <Upload
        ref="upload"
        :show-upload-list="false"
        :default-file-list="defaultList"
        :on-success="handleSuccess"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/"
        style="display: inline-block;width:58px;">
        <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
        </div>
    </Upload>

这里的action应该填写什么,官方给的是上传的地址,那是七牛的一个地址还是什么?
参考了七牛的jsSDK, 还是没有看懂怎么结合这个upload组件去上传一张或多张图片,哪位高手可以帮忙解答一下,谢谢!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

爱冒险2022-09-13 19:27:43
    <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-progress="onProgress"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          multiple
          type="drag"
          name="file"
          action="//upload-z2.qiniu.com/"      -----> 这里的地址填写的是七牛云服务器对应的存储控件
          :data="{token: token}"      -----> 这里记得要写 token, token 是通过后台获取的
          style="display: inline-block;width:58px;"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="camera" size="20"></Icon>
          </div>
      </Upload>

七牛云存储空间所对应的上传地址

华东: (z0):
    服务器端上传地址:http(s)://up.qiniup.com
    客户端上传地址: http(s)://upload.qiniup.com
华北: (z1):
    服务器端上传地址:http(s)://up-z1.qiniup.com
    客户端上传: http(s)://upload-z1.qiniup.com
华南: (z2):
    服务器端上传地址:http(s)://up-z2.qiniup.com
    客户端上传: http(s)://upload-z2.qiniup.com
北美: (na0):
    服务器端上传地址:http(s)://up-na0.qiniup.com
    客户端上传地址: http(s)://upload-na0.qiniup.com
新加坡: (as0):
    服器端上传地址:http(s)://up-as0.qiniu.com
    客户端上传地址:http(s)://upload-as0.qiniu.com
柠檬色的秋千2022-09-13 19:27:43

需要请求后台接口,返回一个token,然后携带该token上传到七牛云。

宫墨修音2022-09-13 19:27:43

请问实现了吗?如何做的

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文