1、安裝ali-oss

npm install ali-oss --save

2、demo

此例中使用到了ElementUI的el-upload組件。因為樣式為自定義的 所以沒有用element的自動上傳的屬性，這里配置根據項目需求，需要自定義，可以按照以下配置： http-request：覆蓋默認的上傳行為，可以自定義上傳的實現； show-file-list：是否顯示已上傳文件列表，默認是true； multiple：是否支持多選文件； action：必填參數，上傳的地址（如果不自定義上傳行為，可以直接在action配置地址就行，沒有地址可以為空，但是不能不寫action）。 <template><el-upload :http-request="uploadFile" :multiple="true" :show-file-list="true" action=""><el-button size="small" type="primary">點擊上傳</el-button></el-upload> </template> <script>import OSS from 'ali-oss'export default {data() {return {fileList: []}},methods: {uploadFile(file) {var client = new OSS({region: 'Your region',accessKeyId: 'Your AccessKeyId', accessKeySecret: 'Your AccessKeySecret',bucket: 'Your bucket name'});let name = file.file.name;let index = name.lastIndexOf(".");let suffix = name.substring(index, name.length); // 后綴名//定義唯一的文件名var fileName = 'photo' + file.file.uid + suffix;client.put(fileName, file.file).then(result => {//下面是如果對返回結果再進行處理，根據項目需要this.fileList.push({'name': result.name, 'url': result.url});console.info(this.fileList);}).catch(err => {console.log(err);})},}} </script>

?

效果圖：?

?

轉載于:https://www.cnblogs.com/yeqrblog/p/10342925.html

總結

以上是生活随笔為你收集整理的阿里云OSS上传文件demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。