Skip to content

N
NFT
Commit dab3659b authored by salitedfish's avatar salitedfish
Browse files
Options

阶段性提交

parent 0da74866
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 107 deletions
src/components/common/Cell.vue
View file @ dab3659b
......@@ -22,7 +22,7 @@
<!-- 右边 -->
<div class="right flex items-center overflow-hidden">
<div class="right flex items-center overflow-ellipsis">
<div v-if="type == 'click'" @click="eventEmit(type)">
<div class="flex items-center">
<div class="text-sm">{{ value }}</div>
......@@ -34,11 +34,12 @@
<input
v-model="inputValue"
type="text"
class="bg-transparent"
class="bg-transparent text-sm"
:placeholder="placeholder"
@input="cellOnChange"
/>
</div>
<input v-else-if="type === 'input-num'"
:value="inputValue"
type="number"
......@@ -47,6 +48,7 @@
class="bg-transparent"
:placeholder="placeholder"
/>
<div v-else-if="type === 'pick'">
<div class="flex flex-row items-center">
<div @click="eventEmit(type)">
......@@ -73,6 +75,7 @@
</div>
</div>
</div>
<div v-else-if="type === 'upload'" class="overflow-hidden">
<div class="flex flex-row items-center overflow-hidden">
<div
......@@ -94,15 +97,17 @@
</div>
</div>
</div>
<div v-else-if="type === 'showText'" class="overflow-hidden">
<div class="flex flex-row items-center overflow-hidden">
<div class="flex flex-row items-center overflow-ellipsis">
<div
v-if="name"
class="overflow-hidden overflow-ellipsis"
class="overflow-hidden text-xs"
id="copyNodeId"
>
{{ name }}
</div>
<div ref="btn" @click="handleClickCopy(name)" class="ml-1">
<app-icon name="icon-fuzhi" size="18px"></app-icon>
</div>
......
src/service/nftService/nftService.ts
View file @ dab3659b
......@@ -28,6 +28,10 @@ export class NFTService extends Service {
path: '/oss/policy',
dataType: 'application/x-www-form-urlencoded',
},
fileUpload: {
path: '/oss/upload',
dataType: 'multipart/form-data'
},
getMd5: { path: '/nft/file/md5', dataType: 'multipart/form-data' },
save: { path: '/nft/save', dataType: 'multipart/form-data' },
publish: { path: '/nft/publish', dataType: 'application/json' },
......@@ -205,6 +209,18 @@ export class NFTService extends Service {
})
}
//普通文件上传
async fileUpload(file:File):Promise<string>{
const fd = new FormData()
fd.append('file',file)
return await this.service.post(this.router.fileUpload.path,fd,{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.fileUpload.dataType,
}
})
}
/**
* 完成OSS签名
*/
......
src/service/nftService/types.ts
View file @ dab3659b
......@@ -11,4 +11,5 @@ export interface iSaveData {
isGrant?: number
fileUrl?: string
fileName?: string
cover?: string
}
src/view/NFT/Create/form.vue
View file @ dab3659b
......@@ -18,7 +18,7 @@
:text='fromText.nameText'
:validate="{ maxLen: 20 }"
:placeholder="fromText.namePlaceholder"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => setCreateNFT({ value_name: v })"
></app-cell>
<app-cell
......@@ -27,7 +27,7 @@
:text="fromText.authorText"
:validate="{ maxLen: 20 }"
:placeholder="fromText.authorPlaceholder"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
></app-cell>
<app-cell
......@@ -73,7 +73,7 @@
<div class="step-two" v-if="currentStep == 2">
<app-cell
:text="fromText.fileUploadText"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
type="upload"
:placeholder="fromText.filePlaceholder"
:name="fileName"
......@@ -81,7 +81,7 @@
></app-cell>
<app-cell
text="封面上传(非必填)"
class="text-font-white my-3 "
class="text-font-white my-3 text-xs"
type="upload"
placeholder="请上传相关封面"
:name="coverName"
......@@ -89,7 +89,7 @@
></app-cell>
<app-cell
:text="fromText.fileHashText"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
type="showText"
:name="fileHash"
@cellOnChange="getValue"
......@@ -101,7 +101,7 @@
labelIcon="icon-wenhao"
@clickIcon="alertPlatformSave"
:list="archivesList"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
@cellOnChange="(v) => (createNFT.archives = v)"
></app-cell>
<app-cell
......@@ -112,7 +112,7 @@
labelIcon="icon-wenhao"
@clickIcon="alertAuthorizeRead"
:list="grantList"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
@cellOnChange="(v) => (createNFT.grant = v)"
></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
......@@ -138,20 +138,20 @@
text="NFT编号"
type="showText"
:name="publish.nftId"
class="text-font-white my-3 break-all"
class="text-font-white my-3 text-xs"
></app-cell>
<app-cell
:text="fromText.fileHashText"
type="showText"
:name="publish.fileHash"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
@cellOnChange="getValue"
></app-cell>
<app-cell
text="发行人地址"
type="showText"
:name="publish.wallet"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
@cellOnChange="getValue"
></app-cell>
<app-cell
......@@ -160,7 +160,7 @@
:value="1"
:disabled="true"
type="input-num"
class="text-font-white my-3"
class="text-font-white my-3 text-xs"
@cellOnChange="
(v) => {
publish.count = v;
......@@ -344,7 +344,8 @@ export default Vue.extend({
fileName: "fileName",
file: "file",
pickedList: "pickedList",
coverName: 'coverName'
coverName: 'coverName',
coverFile: "coverFile"
}),
validation(): boolean {
let disabled = true;
......@@ -442,15 +443,15 @@ export default Vue.extend({
this.$router.push("/Nft/create/pick");
},
async publishNft() {
try {
// try {
this.loading4 = true;
const result = this.$service.nftService.publish({
fileHash: this.fileHash,
id: this.publish.id,
wallet: this.publish.wallet,
nftId: this.publish.nftId,
});
// const result = this.$service.nftService.publish();
result
.then((ret: any) => {
this.success = ret === true;
......@@ -463,20 +464,22 @@ export default Vue.extend({
this.success = false;
this.errorMsg = err;
});
} catch (err) {
console.log(err);
}
// } catch (err) {
// console.log(err);
// }
},
async uploadFileToOss(file: File): Promise<string> {
const ossRet = (await this.$service.nftService.ossPolicy()) as any;
await this.$service.nftService.uploadFileToOss(file, ossRet);
const { dir, host } = ossRet;
return `${host}/${dir}${file.name}`;
},
async encryptAndPushToChain() {
this.loading2 = true;
let mistake = false;
try {
// let mistake = false;
// try {
let data = {
author: this.createNFT.value_publisher,
categoryId: parseInt(this.categoryId) ,
......@@ -492,6 +495,7 @@ export default Vue.extend({
isArchives: this.createNFT.archives,
};
} else if (this.createNFT.archives === 1) {
//需要加密存档
const fileUrl = await this.uploadFileToOss(this.file);
data = {
...data,
......@@ -502,29 +506,46 @@ export default Vue.extend({
isGrant: this.createNFT.grant,
};
}
if(this.coverFile){
const coverImgUrl = await this.$service.nftService.fileUpload(this.coverFile)
data = {
...data,
cover: coverImgUrl
}
}
const { id, nftId, wallet, fileHash } =
await this.$service.nftService.save(data);
this.publish.fileHash = fileHash;
this.publish.nftId = nftId;
this.publish.id = id;
this.publish.wallet = wallet;
} catch (err) {
mistake = true;
}
// } catch (err) {
// mistake = true;
// }
this.loading2 = false;
if (mistake) return;
// if (mistake) return ;
},
async currentStepChange(val: number) {
if (this.currentStep === 2 && val === 1) {
await this.encryptAndPushToChain();
} else if (this.currentStep === 3 && val === 1) {
await this.publishNft();
try{
if (this.currentStep === 2 && val === 1) {
await this.encryptAndPushToChain();
} else if (this.currentStep === 3 && val === 1) {
await this.publishNft();
}
}catch(err){
this.loading2 = false
return
}
if (this.currentStep < this.mySteps.length + 1) {
this.currentStep += val;
}
},
clickRepublish() {
this.currentStep = 1;
},
......
src/view/NFT/Create/upload.vue
View file @ dab3659b
<template>
<Layout-Child class="page-scroll text-center">
<div class="text-font-white mt-20 text-center mb-20">{{uploadAccept.acceptTitle}}</div>
<input type="file" id="upload" class="hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
<input type="file" id="upload" accept="image/*" class=" hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
<input type="file" id="upload" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
<div class="text-font-white mt-20 text-center mb-6">{{uploadAccept.acceptTitle}}</div>
<input type="file" class="upload hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
<input type="file" accept="image/*" class="upload hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
<input type="file" accept="image/*" capture="camera" class="upload hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<label @click="initUpload" class="inline-block">
<div
ref="uploadBox"
class="
upload-box
text-center
flex
items-center
justify-center
text-font-white
"
>
<div
ref="uploadBox"
class="
upload-box
text-center
text-font-white
"
:class="{hiddenBorder:((uploadType == '封面图片' && coverName) || (uploadType == '图片' && fileName))}"
>
<img
@click="initUpload"
v-if="uploadNull "
src="@/assets/icons/upload.png"
alt=""
class="mx-auto mt-28"
/>
<Loading type="spiner mt-16" v-else-if="uploadLoading" />
<!-- 当上传的是图片或封面图片 -->
<div v-else-if="showImgUploadImg" class="img-box">
<img
v-if="showNotUploadImg "
src="@/assets/icons/upload.png"
alt=""
class="mx-auto"
/>
<img
v-else-if="showImgUploadImg"
:src="showUploadFile"
alt=""
class="mx-auto"
@click="showFullImg"
/>
<img
v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
src="@/assets/icons/upload.png"
alt=""
class="mx-auto"
/>
<Loading type="spiner" v-else-if="status === uploadStatus.uploading || coverstatus === uploadStatus.uploading" />
<div v-else-if="status === uploadStatus.failed || coverstatus === uploadStatus.uploading">上传失败</div>
</div>
</label>
<div class="text-center text-font-white">
<div v-if="(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class="mt-2">{{uploadAccept.acceptText}}</div>
<div v-else class="mt-2">
<!-- 当上传的不是图片或封面图片 -->
<img
v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
src="@/assets/img/file.png"
alt=""
class="mx-auto mt-16"
/>
<div v-else-if="uploadFailed">上传失败</div>
<div v-if="!(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class=" w-40 mx-auto mt-2 text-xs">
{{ (uploadType == '封面图片' && coverName)?coverName:fileName }}
</div>
<!-- <div v-if="uploadType == '封面图片' && coverName" class="mt-2">
{{ coverName }}
<div v-if="uploadNull" class="mt-2 text-center mx-auto w-40" style="color: #0076ff" @click="initUpload">
{{uploadType=='封面图片'?"上传封面":'上传附件'}}
</div>
<div v-else-if="uploadType !== '封面图片' && fileName" class="mt-2">
{{ fileName }}
</div> -->
<label for="upload" class="mt-2">
<div
v-if="showReUpload"
style="color: #0076ff"
class="inline-block"
>
<div v-if="showReUpload" class="mt-2 flex mx-auto w-40 justify-between" style="color: #0076ff">
<div @click="clearUpload">
删除上传
</div>
<div @click="initUpload">
重新上传
</div>
</label>
</div>
</div>
<div class="mt-2 mx-auto w-56 text-center text-font-white text-xs">{{uploadAccept.acceptText}}</div>
<div class="flex justify-between fixed bottom-0 left-0 right-0">
<app-btn
......@@ -141,11 +134,11 @@ export default Vue.extend({
case '剧本':
return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
case '视频':
return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为500M以内'}
case '电影':
return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传电影仅支持MOV、MP4格式文件，大小限制为1G以内'}
case '音频':
return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件'}
return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件，大小限制为100M以内'}
case '图片':
return {acceptTitle:'请上传图片附件',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
case '封面图片':
......@@ -163,14 +156,23 @@ export default Vue.extend({
return ''
}
},
showNotUploadImg():boolean{
return (this.uploadType !== '封面图片' && this.status === uploadStatus.NULL) || (this.uploadType == '封面图片' && this.coverstatus === uploadStatus.NULL)
},
showImgUploadImg():boolean{
return (this.status === uploadStatus.success && this.uploadType == '图片') || (this.coverstatus === uploadStatus.success && this.uploadType == '封面图片')
},
uploadNull():boolean{
return ((this.uploadType !== '封面图片' && this.status === uploadStatus.NULL)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.NULL))
},
uploadLoading():boolean{
return ((this.uploadType !== '封面图片' && this.status === uploadStatus.uploading)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.uploading))
},
uploadSuccess():boolean{
return ((this.uploadType !== '封面图片' && this.status === uploadStatus.success)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.success))
},
showReUpload():boolean{
return ((this.uploadType !== '封面图片') && (this.status === uploadStatus.failed || this.status === uploadStatus.success))||((this.uploadType == '封面图片') && (this.coverstatus === uploadStatus.failed || this.coverstatus === uploadStatus.success))
},
uploadFailed():boolean {
return ((this.uploadType !== '封面图片' && this.status === uploadStatus.failed)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.failed))
}
},
methods: {
......@@ -199,6 +201,7 @@ export default Vue.extend({
const ele = this.$refs[ref] as HTMLInputElement;
const files = ele.files;
if (files && files.length >= 1) {
this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.uploading;
this.afterRead(files[0]);
}
},
......@@ -210,38 +213,47 @@ export default Vue.extend({
const ab = await file.arrayBuffer();
const fileMd5 = md5(Buffer.from(ab));
// const ossRet = await this.$service.nftService.ossPolicy();
// const uploadRet = await this.$service.nftService.uploadFileToOss(
// file,
// ossRet
// );
if(this.uploadType == '封面图片') {
this.coverstatus = uploadStatus.uploading;
this.setState({
coverName: file.name,
coverFile: file,
});
this.coverstatus = uploadStatus.success;
}else {
this.status = uploadStatus.uploading;
this.setState({
fileName: file.name,
fileHash: fileMd5,
file: file,
});
this.status = uploadStatus.success;
}
this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.success;
} catch (err) {
console.log(err, "show err");
if(this.uploadType == '封面图片') {
this.coverstatus = uploadStatus.failed;
}else {
this.status = uploadStatus.failed;
}
this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.failed;
}
},
showFullImg(){
console.log('图片预览')
},
clearUpload(){
if(this.uploadType == '封面图片'){
this.setState({
coverName: '',
coverFile: undefined,
});
this.coverstatus = uploadStatus.NULL
}else {
this.setState({
fileName: '',
fileHash: '',
file: undefined,
});
this.status = uploadStatus.NULL
}
for(let item of document.getElementsByClassName('upload')){
(item as any).value = ''
}
},
afterRead2(file: any) {
file.status = "uploading";
file.message = "上传中...";
......@@ -255,12 +267,22 @@ export default Vue.extend({
});
</script>
<style scoped>
<style scoped lang="less">
.upload-box {
width: 140px;
height: 71px;
width: 200px;
height: 280px;
margin: 0 auto;
background: #1d2649;
border-radius: 15px;
border: 1px solid #0078ff;
padding-top: 1px;
.img-box {
height: 200px;
display: flex;
align-items: center;
}
}
.hiddenBorder {
border: none;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment