vue 组件调用封装的外部js,在组件中如何获取js中的数据?
因为项目中有用到很多上传组件的功能,直接上传到oss服务器,现在我把js配置项以及数据的上传获取封装到了一个js中,在js中能获取到返回的数据,但是在组件中调用,获取不到js中返回的数据?应该怎么改代码呢?大神们,小白,请指导
外部封装的js文件代码如下:
import { Toast } from 'vant';
import { stsOss } from '@api/oss'
let OSS = require('ali-oss')
class CLIENT {
constructor (fileName, file) {
this.fileName = fileName
this.file = file
}
// 获取临时访问凭证(从后端获取)
getStsOss() {
stsOss().then(res => {
if (res.data.code === 200) {
this.clientInit(res.data.data)
} else {
this.$notify({ type: 'danger', message: res.data.msg })
}
})
}
// 实例化oss
clientInit(data) {
let client = new OSS({
region: 'oss-cn-shanghai',
accessKeyId: data.accessKeyId,
accessKeySecret: data.accessKeySecret,
bucket: 'yiyong-pri',
stsToken: data.stsToken,
secure: true
})
this.clientUpload(client)
}
// 上传文件方法
clientUpload(client) {
if (client) {
return new Promise((resolve, reject) => {
client.put(this.fileName, this.file).then(res => {
// 下面是如果对返回结果再进行处理,根据项目需要
if (res.res.status === 200) {
Toast.success('上传成功')
let attachs = []
attachs.push({
attachName: res.name,
attachUrl: res.url
})
console.log('测试js封装返回', attachs)
resolve(attachs)
} else {
Toast.fail('上传失败')
}
})
.catch(err => {
console.log('err:', err)
})
})
}
}
}
export default CLIENT
组件内上传时候的调用:
btnUpload(file) {
const fileName = `/project/bidding/${file.file.name}`
let cli = new CLIENT(fileName, file.file)
console.log(cli.getStsOss())
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
你的
cliInit
最后没有返回clientUpload
,getStsOss
中和then内部都没有相应的返回,另外建议问题不要直接贴图片,就算想指出哪里需要改,别人还得照着敲一遍代码问题1:该方法没有return语句
问题2: 在promise中也没有也没有return,resolve的data为undefined
问题3:打印时没有在then函数中只会打印出返回promise对象
...]()
换个思路,封装个update组件,emit出来