【免费】前端（js/vue）上传文件到又拍云资源-CSDN文库

共62个文件

sample：13个

xml：8个

master：4个

vue.js

javascript

需积分: 0 200 浏览量 2023-09-08 17:47:39 上传评论收藏 295KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

web-upload-upyun.zip （62个子文件）

web-upload-upyun

upyn-hash-vue.js 9KB

axios.js 31KB

vue.js 478KB

.git

index 2KB

HEAD 23B

refs

heads

master 41B

tags

remotes

origin

HEAD 32B

master 41B

COMMIT_EDITMSG 57B

objects

708cb72fbe08f7a7b2685404ed211ee0b0042c 733B

c750016ff0aac1634fd9263e1a42c50442c7f9 175B

ce6206919ad4a9a2e24558e009572a6ea1c368 2KB

722179cd88f640de53f91f0dc676f7a0e2f702 176B

52a068eab0bc557a413852c1b9f267e46d5b97 203B

de870cdf419e188dba8fd5bf2f4819201a3afd 117B

a8d6f0257d0d92df21769c4743d807edd3b118 13KB

pack

pack-9a1f6d719729287c3b1b05c9913eed88370e7d0d.idx 2KB

pack-9a1f6d719729287c3b1b05c9913eed88370e7d0d.pack 112KB

46cc4bd64e41c1bcf2e32705e638cc8adf86ae 110B

info

76bebc4b66a3cf18309aec1ef9f908bc953ebd 210B

2548a723e5a2d5723b969550034c5b4c299c2d 384B

384586bde260f34aa8af79596fc0d2d8ecb7c4 667B

6b8ac98cd08b6e4b9a338a8aa02d1bc131d580 1KB

description 73B

packed-refs 114B

FETCH_HEAD 108B

info

exclude 240B

logs

HEAD 531B

refs

heads

master 531B

remotes

origin

HEAD 187B

master 278B

hooks

post-update.sample 189B

prepare-commit-msg.sample 1KB

commit-msg.sample 896B

pre-receive.sample 544B

update.sample 4KB

pre-commit.sample 2KB

pre-rebase.sample 5KB

applypatch-msg.sample 478B

fsmonitor-watchman.sample 5KB

push-to-checkout.sample 3KB

pre-applypatch.sample 424B

pre-push.sample 1KB

pre-merge-commit.sample 416B

config 337B

.idea

git_toolbox_prj.xml 494B

.name 21B

web-upload-upyun.iml 469B

watcherTasks.xml 1KB

vcs.xml 185B

workspace.xml 4KB

inspectionProfiles

Project_Default.xml 256B

又拍云上传文件.iml 469B

modules.xml 301B

.gitignore 109B

jsLibraryMappings.xml 192B

jsLinters

eslint.xml 179B

css

index.less 2KB

index.css 2KB

index.css.map 1KB

index.html 4KB

favicon.png 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>又拍云上传文件</title> <link rel="shortcut icon" href="./favicon.png" type="image/png"> <link rel="stylesheet" href="./css/index.css" /> <script src="./js/vue.js"></script> <script src="./js/axios.js"></script> <script src="https://cdn.xiaoli.vip/tools/upyun/hash.js"></script> </head> <body> <div id="app"> <h2>又拍云上传文件（图片版）</h2> <div class="img-upload"> <img v-if="imgLocalUrl" :src="imgLocalUrl" alt=""> <div v-else>+</div> <input id="upload" type="file" accept=".jpg,.png" @change="uploadImg" /> </div> <div class="config"> <div class="config-line"> <div>云存储服务名</div> <input type="text" v-model="bucket" placeholder="请输入云存储服务名称" /> </div> <div class="config-line"> <div>操作员</div> <input type="text" v-model="username" placeholder="请输入操作员名称" /> </div> <div class="config-line"> <div>密码</div> <input type="text" v-model="password" placeholder="请输入密码" /> </div> <div class="config-line"> <div>上传路径</div> <input type="text" v-model="path" placeholder="请输入上传路径" /> </div> <div class="config-line"> <div>测试域名</div> <input type="text" v-model="testCdnUrl" placeholder="请输入测试域名" /> </div> </div> <div class="preview-list"> <div v-for="item in uploadImgList" :key="item"> <img :src="item" alt=""> <a :href="item" target="_blank">{{ item }}</a> </div> </div> </div> </body> <script> const App = { data() { return { bucket: 'xiaoli-test', username: 'test', password: '0LjHlUNs8n0RWbEPi3c0BB3dOJBkfhwd', path: '/img', testCdnUrl: 'http://xiaoli-test.test.upcdn.net', imgLocalUrl: '', uploadImgList: [] }; }, methods: { uploadImg (e) { const file = e.target.files[0] this.imgLocalUrl = URL.createObjectURL(file) /* 创建FormData */ const uploadData = new FormData() uploadData.append('file', file); const url = `https://v0.api.upyun.com/${ this.bucket }` /* 计算policy */ const policyObj = { bucket: this.bucket, 'save-key': `${ this.path }/{filename}{.suffix}`, expiration: new Date().getTime() + 600, /* 过期时间，在当前时间+10分钟 */ } const policy = btoa(JSON.stringify(policyObj)) uploadData.append('policy', policy); /* 计算 Authorization */ const passwordMd5 = HexMD5.MD5(this.password).toString(HexMD5.enc.Hex) /* [Method-请求方法, URI-请求路径, policy] */ const arr = ['POST', `/${ this.bucket }`, policy] const authorization = `UPYUN ${ this.username }:${ b64hamcsha1(passwordMd5, arr.join('&')) }` uploadData.append('authorization', authorization); axios({ method: 'POST', url, data: uploadData }).then((res) => { this.uploadImgList.push(this.testCdnUrl + res.data.url) }).catch(e => { console.error('上传失败', e) alert('上传失败') }) /* 清除input的值，解决二次上传文件未触发 */ document.getElementById('upload').value = '' } } }; const app = Vue.createApp(App); app.mount("#app"); </script> </html>

评论收藏

内容反馈